zoukankan      html  css  js  c++  java
  • Knockout>The "template" binding

    Knockout的模板绑定,

    模版可以用来方便构建复杂的HTML界面,比如拥有嵌套结构的HTML代码页面。

    Knockout有两种方式使用模板:

    1.Knockout自带的模板引擎。

    2.第三方的模版引擎,比如jQuery.tmpl

    Knockout自带模版引擎的参数列表:

    data-bind="template: { name: 'person-template', data/foreach: buyer,afterRender/afterAdd/beforeRemove}"

    name参数就是所对应你定义的模板id,

    data参数就是你的模板数据源,指向一个js对象;foreach参数也是,指向一个js对象数组。

    afterRender/afterAdd/beforeRemove这三个,就是事件咯,触发时机看名字,它们回调函数。

    第一个例子, 没什么好说

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>The "template" binding</title>
    <script type="text/javascript" src="../jquery-1.7.1.js"></script>
    <script type="text/javascript" src="../knockout-2.0.0.debug.js"></script>
    <script type="text/javascript">
    $(
    function(){

        
    function MyViewModel() {
            
    this.buyer = { name: 'Franklin', credits: 250 };
            
    this.seller = { name: 'Mario', credits: 5800 };    
        }
        ko.applyBindings(
    new MyViewModel());     

    })

    </script>
    </head>
    <body>
    <h2>Participants</h2>
    Here are the participants:
    <div data-bind="template: { name: 'person-template', data: buyer }"></div>
    <div data-bind="template: { name: 'person-template', data: seller }"></div>
    <script type="text/html" id="person-template">
        
    <h3 data-bind="text: name"></h3>
        <p>Credits: <span data-bind="text: credits"></span></p>
    </script>
    </body>
    </html>

    第二个例子:解释就是,第一个例子用了data参数,第二个例子用了foreach参数

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>The "template" binding</title>
    <script type="text/javascript" src="../jquery-1.7.1.js"></script>
    <script type="text/javascript" src="../knockout-2.0.0.debug.js"></script>
    <script type="text/javascript">
    $(
    function(){
        
    function MyViewModel() {
            
    this.people = [
                { name: 
    'Franklin', credits: 250 },
                { name: 
    'Mario', credits: 5800 }
            ]
        }
        ko.applyBindings(
    new MyViewModel());

    })

    </script>
    </head>
    <body>
    <h2>Participants</h2>
    Here are the participants:
    <div data-bind="template: { name: 'person-template', foreach: people }"></div> 
    <script type="text/html" id="person-template">
        
    <h3 data-bind="text: name"></h3>
        <p>Credits: <span data-bind="text: credits"></span></p>
    </script>
    </body>
    </html>

    第三个例子:动态选择模板,往name里面传入一个方法,用来筛选用哪个模板

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>The "template" binding</title>
    <script type="text/javascript" src="../jquery-1.7.1.js"></script>
    <script type="text/javascript" src="../knockout-2.0.0.debug.js"></script>
    <script type="text/javascript">
    $(
    function(){
        
    var viewModel = {
            employees: ko.observableArray([
                { name: 
    "Kari", active: ko.observable(true) },
                { name: 
    "Brynn", active: ko.observable(false) },
                { name: 
    "Nora", active: ko.observable(false) }
            ]),
            displayMode: 
    function(employee) {
                
    return employee.active() ? "active" : "inactive";
            }
        };
        
    //viewModel.employees()[1].active(true);
        ko.applyBindings(viewModel);

    })

    </script>
    </head>
    <body>
    <h2>Participants</h2>
    Here are the participants:
    <div data-bind="template: { name: displayMode, foreach: employees }"></div> 
    <script type="text/html" id="active">
        active:
    <span data-bind="text: name"></span>
    </script>
    <script type="text/html" id="inactive">
        inactive:
    <span data-bind="text: name"></span>
    </script>
    </body>
    </html>

    至于如何用第三方模板引擎,比如jQuery.tmpl就不说了。


    合乎自然而生生不息。。。
  • 相关阅读:
    HDU 1124 Factorial
    hdu 1690 Bus System
    hdu 1113 Word Amalgamation
    POJ 2482 Stars in Your Window
    hdu 1385 ZOJ 1456 Minimum Transport Cost(经典floyd)
    hdu 1907 John
    VMware 虚拟机 安装 UBuntu 9.10 命令模式转换成窗口模试
    #pragma CODE_SEG __NEAR_SEG NON_BANKED详解
    Ubuntu 下Hadoop 伪分布式 hadoop0.20.2.tar.gz 的安装
    文件拷贝代码以及疑问
  • 原文地址:https://www.cnblogs.com/samwu/p/2437873.html
Copyright © 2011-2022 走看看