flux

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

<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>

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

<div id="app1">
    <span data-bind="text:name" ></span>
</div>
<div id="app2">
    <span data-bind="text:name"></span>
    <span data-bind="text:full"></span>
    <button type="button" data-bind="click:changeName" >换名</button>
</div>

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

ko.$store.dispatch('setCurrent', data.thisFolder, self.viewName, self.viewName + ':reload' );