三、简单的使用
本示例定义了四个ko绑定区域,分别是:app1, app2, app3, app4。实现app4中对name的改变自动影响到app1,而app3对列表的改变自动影响到app2。
3.1 定义vm并初始化store
function ViewModel(){ this.list = ko.observableArray(); this.name = ko.observable('无名氏'); this.count = ko.computed(function(){ //必须用this,这个时候ko.$store还没创建完成,应该ko.computed创建时会执行一次此处 //如果是子vm依赖主vm,还是可以用ko.$store的 return this.list().length + '个数'; //需要对监控对象求值,否则computed不能有效 },this); } var fullVm = new ViewModel(); var index = 1; fullVm.vf={ add: function(){ ko.$store.dispatch('addClass',{title: 'title' + (index++)}); } } var opt = { state: { class: fullVm }, actions:{ "setName":function(state, name){ state.class.name(name); }, "addClass":function(state, classInfo){ state.class.list.push(classInfo); } }, getters:{ "getName":function(state){ return state.class.name; } } } flux.createStore(opt);
根据上述代码,首先定义了ViewModel的一个类,并创建了一个fullVm的一个实例,然后直接在fullVm实例上增加了add方法。
opt的state引用的是fullVm,其中还配置了actions和getters相关对象,然后调用flux.createStore(opt)方法。创建一个store,并关联到ko.$store对象上。
3.2 与视图绑定
html代码:
<div id="app1"> app1: <span data-bind="text:ko.$store.get('getName')"></span> </div> <div id="app4"> app4: <input type="text" data-bind="value:name" /> <button type="text" data-bind="click:changeName" >改变名字</button> <span data-bind="text:ko.$store.state.class.name"></span> </div> <hr> <div id="app2"> app2: <ul data-bind="foreach:list" > <li data-bind="text:title" ></li> </ul> </div> <div id="app3"> app3: <button type="button" data-bind="click:vf.add" >添加</button> <span data-bind="text:count"></span> </div>
js代码:
var app1 = ko.applyBindings(fullVm, document.getElementById("app1")); var app2 = ko.applyBindings(fullVm, document.getElementById("app2")); var app3 = ko.applyBindings(fullVm, document.getElementById("app3")); //测试两个vm之间的依赖 解藕 var app4 = ko.applyBindings({ name: ko.observable(), changeName:function(data,event){ ko.$store.dispatch('setName', this.name()); } }, document.getElementById("app4"));
四、域的实例