Question

我试图找出如何将多个模型从主模型绑定到HTML标记的不同部分。 HTML部分是： -

   <ul data-bind="foreach: { data: members}">
        <li>
            <span data-bind="text: MemberId"></span>
            <span data-bind="text: Name"></span>
            <span data-bind="text: SwagCompany"></span>
            <span data-bind="text: SwagThing"></span>
        </li>
    </ul>

<span data-bind="text: winner.Name"></span>

但是无法弄清楚如何绑定winner.Name，我的模型看起来像这样： -

var masterViewModel = {
   vmA : { ...},
   vmB : { ... }
}

ko.applyBindings({
      winner: ko.observable(masterViewModel.vmB),
      members: ko.observableArray(mappedData),
      ...
    }

显然我误解了如何正确地应用绑定。我将以下代码作为plunker显示了我正在尝试执行的操作的示例： -

<script>
$(function () {

    var masterViewModel = {
        vmA: function memberViewModel(data) {
            this.Id = data.MemberId;
            this.MemberId = ko.observable(data.MemberId);
            this.Name = ko.observable(data.Name);
            this.SwagCompany = ko.observable("");
            this.SwagThing = ko.observable("");
            this.Photo = ko.observable(data.Photo);
        },
        vmB: {
            Name: "Initial winner..."
        }
    };

    $.getJSON("/home/memberlist")
        .then(function (rawData) {
            return ko.utils.arrayMap(rawData, function (instanceData) {
                return new masterViewModel.vmA(instanceData);
            });
        })
        .done(function (mappedData) {
            doit(mappedData);
        });

    function doit(mappedData) {
        ko.applyBindings({
            winner: ko.observable(masterViewModel.vmB),
            members: ko.observableArray(mappedData),
            getNextWinner: function () {
                var members = this.members();
                var winner = this.winner();
                //console.log(ddd.Name());
                $.getJSON("/home/nextwinner")
                    .then(function (rawData) {
                        var nextWinner = ko.utils.arrayFirst(members, function (member) {
                            return member.Id === rawData.Winner.MemberId;
                        });
                        nextWinner.SwagThing(rawData.WonSwag.Thing);
                        nextWinner.SwagCompany(rawData.WonSwag.Company);
                        winner.Name(rawData.Winner.Name);
                    });
            }
        });
    }
});
</script>

Answer 1

您的代码非常混乱，因为您在applybindings调用中创建了一个viewModel对象，并直接创建了viewModel对象。使用构造函数语法，并创建视图模型的新实例。您需要为applyBindings做的只是为它提供一个主视图模型实例。

以this JSFiddle为例，尝试保持代码的结构和组织，否则会很快变得非常混乱。

// this is like a constructor for your members
var memberViewModel = function memberViewModel(data) {
   var self = this;
   self.Id = data.MemberId;
   self.MemberId = ko.observable(data.MemberId);
   self.Name = ko.observable(data.Name);
};

// This is like a constructor for your master view model
var masterViewModel = function() {
   var self = this;
   self.Members = ko.observableArray();

   // put two members into Members
   self.Members.push(new memberViewModel({MemberId: 1, Name: 'Member1'}));
   self.Members.push(new memberViewModel({MemberId: 2, Name: 'Member2'}));

   // set the winner to the first one for default, if you want
   self.Winner = ko.observable(self.Members()[0]);

   //do your ajax in this function
   self.GetNextWinner = function() {
     self.Winner(self.Members()[1]);
   }
};

//Apply bindings gets one instance of your view model
ko.applyBindings(new masterViewModel());

在KnockoutJs中绑定多个视图模型

1 个答案: