如何在单页中使用两个Ko.Applybindings方法?当我添加两个Applybindings我的代码不工作?并且无法追踪例外情况..

问题描述:

< html>

< script type ='text / javascript'src ='js / knockout-3.1.0.js'>< / script>

< body>

< form data-bind =submit:addItem>

新项目:

< input data-bind ='value :itemToAdd,valueUpdate:afterkeydown'/>

< button type =submitdata-bind =enable:itemToAdd()。length> 0> Add< / button&gt ;

< p>您的商品:< / p>

< select multiple =multiplewidth =50data-bind =options:items &GT; < / select>

< / form>

------------------------ ------------------------------------

< div>你'点击了< span data-bind ='text:numberOfClicks'>& nbsp;< / span>时间< / div>



< button data-bind ='click:registerClick,disable:hasClickedTooManyTimes'>点击我< / button>



< div data-bind ='可见:hasClickedTooManyTimes'>

点击次数过多!请在手指磨损之前停止。

< button data-bind ='click:resetClicks'>重置点击次数< / button>

< / div>

< / body>

< / html>



< script type ='text / javascript'>



var ClickCounterViewModel = function(){

this.numberOfClicks = ko.observable(2);



this.registerClick = function(){

this.numberOfClicks(this.numberOfClicks()+ 1);

} ;



this.resetClicks = function(){

this.numberOfClicks(0);

};



this.hasClickedTooManyTimes = ko.computed(function(){

返回this.numberOfClicks()> = 10;

},这个);

};



ko.applyBindings(new ClickCounterViewModel());





var SimpleListModel = function(items){

this.items = ko.observableArray(items);

this.itemToAdd = ko.observable();

this.addItem = function(){

if(this.itemToAdd()!=){

this.items.push(this.itemToAdd()); //添加项目。写入itemsobservableArray会导致任何关联的UI更新。

this.itemToAdd(); //清除文本框,因为它绑定到itemToAdd可观察状态

}

} .bind(this); //确保this始终是此视图模型

};



ko.applyBindings(new SimpleListModel([Alpha, Beta,Gamma]));



< / script>

<html>
<script type='text/javascript' src='js/knockout-3.1.0.js'></script>
<body>
<form data-bind="submit: addItem">
New item:
<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
<p>Your items:</p>
<select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>
------------------------------------------------------------
<div>You've clicked <span data-bind='text: numberOfClicks'>&nbsp;</span> times</div>

<button data-bind='click: registerClick, disable: hasClickedTooManyTimes'>Click me</button>

<div data-bind='visible: hasClickedTooManyTimes'>
That's too many clicks! Please stop before you wear out your fingers.
<button data-bind='click: resetClicks'>Reset clicks</button>
</div>
</body>
</html>

<script type='text/javascript'>

var ClickCounterViewModel = function() {
this.numberOfClicks = ko.observable(2);

this.registerClick = function() {
this.numberOfClicks(this.numberOfClicks() + 1);
};

this.resetClicks = function() {
this.numberOfClicks(0);
};

this.hasClickedTooManyTimes = ko.computed(function() {
return this.numberOfClicks() >= 10;
}, this);
};

ko.applyBindings(new ClickCounterViewModel());


var SimpleListModel = function(items) {
this.items = ko.observableArray(items);
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
}
}.bind(this); // Ensure that "this" is always this view model
};

ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));

</script>