（更新）knockout.js学习——1.8例子——绑定的详细语法

knockout.js
1、click
如果应用于a标签，会阻止a的默认href动作。如果需要保持href，则在click事件后面加上return true。
clickBubble:false阻止冒泡。


event:
data-bind="event:{mouseover:,mouseout:}"
加上类名：
data-bind="css:{'classname':showOrNot}


if和ifnot表示是否显示该部分。
visible
enable




2、submit绑定


submit绑定会默认阻止表单提交的动作。
如果要保持表单提交的动作，加上:return true;


使用submit而不是click的好处是：submit可以捕捉到输入后enter键操作（等价于submit，可以触发submit对应事件）




3、enable绑定、disable绑定


用于input\textarea\select
当选中时，绑定对应的true或false改变，其他对应按钮的enable根据这个值发生改变。即：一个输入或选择的选中，对应了另一个按钮的enable。


可以使用任意表达式：
<button data-bind="enable: parseAreaCode(viewModel.cellphoneNumber()) != '555'">
    Do something
</button>


4、value绑定


用于input\textarea\select
不用于radio和checkbox，这两个使用checked绑定。
ko会在焦点改变或输入值改变时尝试自动更新。也可以使用valueUpdate来进行绑定。


valueUpdate:'input'    // 当input或textarea元素改变。支持一般浏览器
valueUpdate:'keyup'
valueUpdate:'keypress'
valueUpdate:'afterkeydown'      // 支持旧浏览器
valueUpdate:'valueAllowUnset'   // 只用于使用value来控制select元素的选择时






一般，当在select元素
使用value绑定，意味着描述哪一个option被选择。
但是，如果在model中设置的是value不对应任何一个option选择将会怎么样呢？
ko的默认行为是重写model value 来重置已经选择的下拉列表，因此阻止model和UI的同步。解决方法：在select中设置valueAllowUnset:true。在这种情况下，无论何时你的model value没有在select中展现，select展现空白。当用户选择下拉列表时，value值会对应选择。


简单来说：在viewmodel中写了value的初始值，但是select仍然显示空白，就是因为设置了valueAllowUnset:true。
如果没有写valueAllowUnset:true，ko会默认value的值为undefined。将会匹配optionsCaption进入下拉列表。


<p>
    Select a country:
    <select data-bind="options: countries,
                       optionsCaption: 'Choose one...',
                       value: selectedCountry,
                       valueAllowUnset: true"></select>
</p>
 
<script type="text/javascript">
    var viewModel = {
        countries: ['Japan', 'Bolivia', 'New Zealand'],
        selectedCountry: ko.observable('Latvia')
    };
</script>




5、hasFocus绑定


当有焦点和失去焦点时，hasFocus值对应为true和false。
点击变成编辑框，失去焦点为显示区域：
写法一：
<p>
    Name: 
    <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>
    <input data-bind="visible: editing, value: name, hasFocus: editing" />
</p>
<p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>


function PersonViewModel(name) { // 这种形式在内部的属性需加上this.前缀，function中可以带上参数
    // Data
    this.name = ko.observable(name);
    this.editing = ko.observable(false);
         
    // Behaviors
    this.edit = function() { this.editing(true) }
}
 
ko.applyBindings(new PersonViewModel("Bert Bertington"));




写法二：
点击名字为输入框。<br />
    <p>name:
 <b data-bind="text: editValue, click: showNot, visible: !normal()"></b>
 <input type="text" data-bind="value: editValue, visible: normal, hasFocus: normal" />
    </p>
 
<script type="text/javascript">
    var viewModel = {
        normal: ko.observable(false),
        editValue: ko.observable("Your name"),
        showNot:function(){this.normal(true);},
    };
 ko.applyBindings(viewModel);
</script>






6、checked绑定


checked绑定，用于checkbox和radio。
其他的text控件，下拉列表，非check的表单控件，都用value绑定。
当提供的是ko.observableArray数组时，会自动与check相关的元素对应，没有包括在内的则不选中。
radio：
只有当提供的ko.observable的参数和radio的html中value值相等时，才会被选中。
当名字值一样时，多个radio只能单选。
参考flavorGroup。


checkedValue绑定：
定义了checkbox或radio的value值，是可以绑定的。而不是html中value定义的值。当需要对value值动态变化或对象化或传递参数。




在一下例子中，当checkbox被check的时候，条目对象本身而不是itemName条目名字字符串被包括在chosenItems数组中。
<!-- ko foreach: items -->
    <input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />
    <span data-bind="text: itemName"></span>
<!-- /ko -->
 
<script type="text/javascript">
    var viewModel = {
        items: ko.observableArray([
            { itemName: 'Choice 1' },
            { itemName: 'Choice 2' }
        ]),
        chosenItems: ko.observableArray()
    };
</script>




7、options绑定


只能用于select标签。
绑定的是option下拉列表的每一个条目。
设置的值必须是一个数组，select元素将会展现数组中每一个条目和select中对应的每一个下拉条目。


在多下拉选项展现的列表中，使用 selectedOptions绑定。
在单选择下拉中，可以使用value绑定。




(1)options:


在viewmodel中提供一个observable array。
在html中只需写select。对应ko会增加option到select中，并覆盖本来如果写了的option。


如果参数值是一组字符串，不需要给出其他参数。select元素会为每一个option展现一个字符串值。
如果想要让用户从任意的js对象数组中选择，可以参考optionsText和optionsValue参数。


(2)optionsCaption:


如何避免select默认选中一项。
optionsCaption:"select an item......."
并默认赋值为：undefined




(3)optionsText:


如何绑定options到一个任意js对象数组中，而不是字符串中。
在这种情况下，你应该选择这个对象的属性作为text展示在下拉列表中。方法：optionsText:object.name   optionsText:this.property
通过传递optionsText详细说明对象的属性。




(4)optionsValue:
对应了option的value值，可观测。当选择一个option时，就默认选择/更新了value值。
详细说明对象属性的哪一部分用来设置ko生成的option元素的value属性。
可以通过详细设置一个js function来设置这个value。这个function接受选择的item作为唯一的论据，并且返回一个字符串作为option的value属性。


典型的，你可能只想用optionsValue作为一种确认ko可以正确保留selection的方式，当你更新可用options时。
比如，当你通过ajax访问重复获取列表中car对象
，想要确认car已经保存，你可能需要设置optionsValue到carId，或每一个car对象所拥有的任何唯一的标识符。否则ko不会知道哪一个以前的car对象对应新的。


(5)optionsIncludeDestroyed


有时候你可能要标记一个数组条目进行删除，但是并不是真的删除这部分记录。
这就是non-destructive 删除。
如果要显示销毁的条目，详细说明参数如下：
<select data-bind="options:,optionsIncludeDestroyed:true"></select>


(6)optionsAfterRender


定制回调函数。


(7)selectedOptions


(8)valueAllowUnset
默认显示空白。




9、selectedOptions绑定


应该是数组。
当前选中项绑定。




10、uniqueName绑定 uniqueName:true/false


使元素获得一个唯一的name属性。
如：
   <input type="checkbox"  data-bind="uniqueName: true "/>




<script type="text/javascript">
    var viewModel = {
    };  
    ko.applyBindings(viewModel);
</script>


输出显示效果：
“
<input name="ko_unique_1" type="checkbox" value="sfwf" data-bind="value:kovalue,uniqueName: true ">


<input name="ko_unique_2" type="checkbox" value="sfwf" data-bind="value:kovalue,uniqueName: true ">


”
自动加上了name属性，且唯一。






二、绑定语法


1、跳过帮定值


可以指定没有值的绑定，这将给绑定一个未定义的值。比如：
<span data-bind="text">Text that will be cleared when bindings are applied.</span>


2、绑定的语境、上下文


一个绑定上下文是一个拥有数据的对象。这个数据可以参考绑定获得。


当使用绑定时，ko自动创造和管理层次结构，绑定上下文。
层次结构中的root级别是指你提供给ko.applyBindings(viewModel)的viewModel参数。
这样，每次你使用一个如with、foreach控制流，都会创造一个到嵌套视图data的子绑定上下文。


绑定上下文提供一下可以应用到绑定中的属性：


（1）$parent
这是在父上下文语境中的视图对象，可以迅速跳到当前上下文的外层。
在root上下文背景，$parent是undefined状态。


（2）$parents
这是一个展现所有parent的view model的数组
$parents[0]当前$parent
$parents[1]上一层parent
$parents[2]上上一层parent


（3）$root
这是一个当前上下文背景中的view model对象。
在root上下文中，$data和$root是相同的。
在一个嵌套绑定上下文，这个参数用来设置当前data item。
当范文viewmodel本身而不是属性时，可以用$data。
比如：


当前 with:person绑定，$data是指person。




(4)$index(只在和foreach绑定一起时有效)
$index是一个可观测值，从0开始，当item的index改变时更新。


(5)$parentContext
是指绑定上下文对象所在的parent层级。
与$parent不同，指的是data所在parent层级，而不是绑定上下文所在parent层级。


(6)$rawData、$context、$element






三、template绑定


1、本地模板


2、基于字符串的模板（第三方）




（1）展现一个名字模板：
<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>
 
<script type="text/javascript">
     function MyViewModel() {
         this.buyer = { name: 'Franklin', credits: 250 };
         this.seller = { name: 'Mario', credits: 5800 };
     }
     ko.applyBindings(new MyViewModel());
</script>




（2）foreach的模板绑定
<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>
 
 function MyViewModel() {
     this.people = [
         { name: 'Franklin', credits: 250 },
         { name: 'Mario', credits: 5800 }
     ]
 }
 ko.applyBindings(new MyViewModel());




相同效果：
<div data-bind="foreach: people">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</div>




（5）as指定别名。当指定as时，在使用foreach时，低层级的访问高层级的对象可以用别名代替，而不是用$parent


（6）afterRender、afterAdd、beforeRemove


 (7)动态选择模板


<ul data-bind='template: { name: displayMode,
                           foreach: employees }'> </ul>
 
<script>
    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) {
            // Initially "Kari" uses the "active" template, while the others use "inactive"
            return employee.active() ? "active" : "inactive";
        }
    };
 
    // ... then later ...
    viewModel.employees()[1].active(true); // Now "Brynn" is also rendered using the "active" template.
</script>










（8）使用 jQuery.tmpl模板。2011后就不再更新，建议不使用。使用本地模板（比如foreach,if,with等）。
顺序：
<!-- First jQuery -->     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- Then jQuery.tmpl --> <script src="jquery.tmpl.js"></script>
<!-- Then Knockout -->    <script src="knockout-x.y.z.js"></script>


（9）利用Underscore.js模板引擎




四、自定义模板


1、注册绑定


ko.bindingHandlers


2、ko.bindingHandlers.yourBindingName = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
    }
};
<div data-bind="yourBindingName: someValue"> </div>




update:


(1)element:dome element
(2)valueAccessor:一个js功能，可以得到现在model绑定的属性。可以不用传递任何参数通过valueAccessor()得到，可以接受observable和一般values，调用ko.unwrap得到返回值。
(3)allBindings:一个javascript对象，可以用来访问所有绑定dom元素的model values。
比如检索name绑定：allBindings.get('name')或allBindings.has('name')
(4)viewModel:被bindingContext.$data或bindingContext.$rawData代替，用来访问view model。
(5)bindingContext包括:$parent,$parents,$root用来访问上下文绑定的祖先元素。




动画过渡：
ko.bindingHandlers.slideVisible = {
    update: function(element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();
 
        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.unwrap(value);
 
        // Grab some more data from another binding property
        var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified
 
        // Now manipulate the DOM element
        if (valueUnwrapped == true)
            $(element).slideDown(duration); // Make the element visible
        else
            $(element).slideUp(duration);   // Make the element invisible
    }
};




首先，获取当前绑定的data对象。
其次，获取data的绑定值。