javascript - knockout : separate model from modelview

Question

我有一个被多个 View 模型使用的模型，并且我需要一些其他 javascript 组件来更新模型，由我的虚拟机观察到。我不知道如何做到这一点，因为在教程中，他们在 View 模型中“混合”模型。

这是我的代码:

var ConversationModel = {
    conversations: ko.observableArray(),
    open: function(userId){
        for(var i = 0; i < this.conversations.length; i++){
            if(this.conversations[i].userId == userId){
                return;
            }
        }

        var self = this;
        var obj = ko.observable({
            userId: userId
        });

        self.conversations.push(obj);

        UserManager.getUserData(userId, function(user){
            $.getJSON(Routes.messenger.getConversation, "receiver=" + userId, function(data){
                obj.receiver = user;
                obj.data = data;
            });
        });
    }
};

function ConversationDialogViewModel() {
    var self = this;

    this.conversations = ko.computed(function(){
        return ConversationModel.conversations;
    });

    console.log(this.conversations());

    this.conversations.subscribe(function(context){
        console.log(context);
    });
}

Answer 1

你可以找到一个(相当)好的例子 here如何组合:

1. 组件
2. 每页 ViewModel
3. 中央服务提供商(例如，调用 API 或在不同组件之间提供状态信息)

请注意代码是 ES2015(新的 Javascript)，但如果您愿意，您也可以用纯 Javascript 编写。 gulp 脚本包括对组件中的任何 html 模板进行字符串化，因此它们可以组合并作为一个文件加载，但可以作为单独的元素进行编辑。

示例组件:

const ko = require('knockout')
    , CentralData = require('../../service-providers/central-data')
    , CentralState = require('../../service-providers/central-state')
    , template = require('./template.html');

const viewModel = function (data) {

    //Make service providers accessible to data-bind and templates
    this.CentralData = CentralData;
    this.CentralState = CentralState;

    this.componentName = 'Component One';
    this.foo = ko.observable(`${this.componentName} Foo`);
    this.bar = ko.observableArray(this.componentName.split(' '));
    this.barValue = ko.observable("");
    this.bar.push('bar');
    this.addToBar = (stuffForBar) => {
        if(this.barValue().length >= 1) {
            this.bar.push(this.barValue());
            CentralData.pushMoreData({firstName: this.componentName,secondName:this.barValue()});
        }
    };
    this.CentralState.signIn(this.componentName);
    if (CentralData.dataWeRetrieved().length < 10) {
        var dataToPush = {firstName : this.componentName, secondName : 'Foo-Bar'};
        CentralData.pushMoreData(dataToPush);
    }
};
console.info('Component One Running');
module.exports = {
    name: 'component-one',
    viewModel: viewModel,
    template: template
};

和组件模板:

<div>
    <h1 data-bind="text: componentName"></h1>
    <p>Foo is currently: <span data-bind="text: foo"></span></p>
    <p>Bar is an array. It's values currently are:</p>
    <ul data-bind="foreach: bar">
        <li data-bind="text: $data"></li>
    </ul>
    <form data-bind="submit: addToBar">
        <input type="text"
               name="bar"
               placeholder="Be witty!"
               data-bind="attr: {id : componentName}, value : barValue" />
        <button type="submit">Add A Bar</button>
    </form>
    <h2>Central State</h2>
    <p>The following components are currently signed in to Central State Service Provider</p>
    <ul data-bind="foreach: CentralState.signedInComponents()">
        <li data-bind="text: $data"></li>
    </ul>
    <h2>Central Data</h2>
    <p>The following information is available from Central Data Service Provider</p>
    <table class="table table-bordered table-responsive table-hover">
        <tr>
            <th>Component Name</th><th>Second Value</th>
        </tr>
        <!-- ko foreach: CentralData.dataWeRetrieved -->
        <tr>
            <td data-bind="text: firstName"></td><td data-bind="text: secondName"></td>
        </tr>
        <!-- /ko -->
    </table>
    <h3>End of Component One!</h3>
</div>

出于您的目的，您可以忽略 Central 状态提供程序和 psuedo API，但随着您的应用变得更加复杂，您可能会发现该模型很有用。