• knockoutjs(02) ko & jsrender


    <ul data-bind="template: 'peopleList'"></ul>
    
    <script type="text/html" id="peopleList">
        {{for people()}}
            <li>
                {{: first() }}
            </li>
         {{/for}}
    </script>
    
    <hr/>
    
    <ul data-bind="template: { name: 'peopleList2', foreach: people }"></ul>
    
    <script type="text/html" id="peopleList2">
            <li>
                {{: first() }}
            </li>
    </script>
    
    <hr/>
    
    <ul data-bind="template: { name: 'peopleList3', foreach: people }"></ul>
    
    <script type="text/html" id="peopleList3">
            <li>
                <input data-bind="value: first" />
                <a href="#" data-bind="click: $root.removePerson"> x </a>
            </li>
    </script>
    
    <hr/>
                
    <button data-bind="click: addPerson">Add</button>
    
    
    
            
    
    //jsRender engine starting here   
    (function(ko, jsviews, $) {
        if (jsviews || $.views) {
            ko.jsRenderEngine = function() {
                //if no jQuery, then need to use jsviews
                var compiler = jsviews ? jsviews.templates : $.templates,
                    views = jsviews ? jsviews : $.views;
    
                //save off the compiled template and render
                this.renderTemplateSource = function(templateSource, bindingContext) {
                    var compiled = templateSource.data("compiled");
                    if (!compiled) {
                        compiled = compiler(templateSource.text() || "");
                        templateSource.data("compiled", compiled);
                    }
    
                    return ko.utils.parseHtmlFragment(compiled.render(bindingContext.$data, { koBindingContext: bindingContext }));
                };
                
                //ko adds code to hook up bindings after rendering
                this.createJavaScriptEvaluatorBlock = function(script) {
                    return "{{:~ko_with(\"" + script + "\") }}";
                };
                
                //ko expects to be able to find the variables directly            
                views.helpers({
                   ko_with: function(script) {
                       var wrapped = "with(context) { with(data) { return " + script + "} }";
                       return (new Function("context", "data", wrapped))(this.ctx.koBindingContext, this.data);         
                   }
                });
            };
            
            ko.jsRenderEngine.prototype = new ko.templateEngine();
    
            //set the default engine to be the jsRender engine
            ko.setTemplateEngine(new ko.jsRenderEngine());
        }
    })(ko, this.jsviews, this.jQuery);
    //end jsRender engine
    
    
    //View Model code
    var Person = function(first, last, age) {
       this.first = ko.observable(first);
       this.last = ko.observable(last);
       this.age = ko.observable(age);   
    };
    
    var ViewModel = function() {
        var self = this;
        
        this.message = ko.observable("hello");
        
        this.people = ko.observableArray([
            new Person("Bob", "Smith", 30),
            new Person("Jim", "Jones", 22),
            new Person("Sally", "Johnson", 41)       
        ]);
        
        this.addPerson = function() {
            self.people.push(new Person("new", "person", 0));  
        };
                             
        this.removePerson = function(person) {
            self.people.remove(person);    
        };
    };
            
    ko.applyBindings(new ViewModel());

    http://jsfiddle.net/rniemeyer/MvCjB/

    ----------------------------------- http://www.cnblogs.com/rock_chen/
  • 相关阅读:
    搭建SSM框架之Spring
    手动编写第一个tomcat项目
    电信宽带运营支撑系统
    Java反射
    枚举
    类、枚举与接口
    (总结4)HTML5中如何自定义属性
    (总结3)HTML5中获取元素新增的dom方法以及类名操作
    (总结2)HTML5中新增加的音频/视频标签
    (总结1)HTML5中新增加的表单元素
  • 原文地址:https://www.cnblogs.com/rock_chen/p/2727671.html
Copyright © 2020-2023  润新知