在knockoutjs上如何实现flux

下面小编就为大家分享一篇在knockoutjs 上自己实现的flux方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

在knockoutjs 上实现 Flux 单向数据流 状态机，主要解决多个组件之间对数据的耦合问题。

一、其实简单

flux的设计理念和实现方案，很大程度上人借鉴和参考了Vuex的实现，只是简化了某些过程，数据流向图如下：

从上图，中以看出数据的改变是单向循环的。我想这就是Flux理念的核心所在吧。Vuex中对Action规范为Action和Mutation，由action去触发Mutation，action是可以异步的，而Mutation则是同步更新。而我在设计ko的Flux时，去掉了Mutation这个环节，是因为我理解为，异步的请求一般情况下都是与api接口有关系，这块内容存在极大的变化性，应该从业务或项目构架上做一层区分。

二、如果使用

当然，flux只是针对knockoutjs的，所以你使用之前必须引入knockoutjs。flux主要的方法和对象

2.1 静态方法

2.1.1 flux.createStore参数格式

2.2 实例方法

createStore方法的执行，会在ko实例上增加$store属性，此属性是状态器的实例对象，在任何位置都可以调用他的dispatch来触发事件。

三、简单的使用

本示例定义了四个ko绑定区域，分别是:app1, app2, app3, app4。实现app4中对name的改变自动影响到app1，而app3对列表的改变自动影响到app2。

3.1 定义vm并初始化store

ASP.NET 4.0电子商城

在现实生活中的购物过程，购物者需要先到商场，找到指定的产品柜台下，查看产品实体以及标价信息，如果产品合适，就将该产品放到购物车中，到收款处付款结算。电子商务网站通过虚拟网页的形式在计算机上摸拟了整个过程，首先电子商务设计人员将产品信息分类显示在网页上，用户查看网页上的产品信息，当用户看到了中意的产品后，可以将该产品添加到购物车，最后使用网上支付工具进行结算，而货物将由公司通过快递等方式发送给购物者

下载

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代码：

 app1:
 


 app4:
 
 改变名字
 



 app2:
 

  

 


 app3: 
 添加
 

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"));

四、域的实例

html代码:

 


 
 
 换名

js代码：

function rootViewModel(){
 this.name = ko.observable('root'); 
}
var rVM = new rootViewModel();
flux.createStore({ state: rVM}); //创建root状态器

var treeNode={
 name: ko.observable('node'),
 changeName:function(){
  ko.$store.areas.treeNode.state.name('新名字');
 },
 full: ko.computed(function(){
  //computed的职责：1. 监控其他对象属性的变化，而影响自身对象（flux解决）；2. 合并自身对象的几个属性（在function下，有this可解）
  //不能通过ko.$store访问对象本身，因为首次对象本身还没初始化好
  var store = ko.$store;
  //(store.areas.treeNode? store.areas.treeNode.state.name() : '') 这样也是不行，因为解决第一次通不过，后面肯定不行
  return store.state.name();
 })
}

ko.$store.register('treeNode', flux.createStore({ state: treeNode})); //创建子状态机
var app1 = ko.applyBindings(rVM, document.getElementById("app1"));
var app2 = ko.applyBindings(treeNode, document.getElementById("app2"));

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在nodejs中如何调取微信收货地址

在nodejs中如何实现微信支付

详细解读Vuejs中响应式原理

使用nodeJS如何实现微信分享