将可观察数据和计算数据推送到可观察数组

问题描述：

我试图在计算名和姓时试图推送多个数据（名字和姓氏），并尝试将数据推送到同一个数组中我被抛出错误。以下是我的代码。将可观察数据和计算数据推送到可观察数组

视图模型：

var viewModel = function() { 

    var self = this; 

    self.gameofthrones = ko.observableArray ([ 
    {firstname: 'Jon', lastname: 'Snow'}, 
    {firstname: 'Robb', lastname: 'Stark'} 
    ]); 

    self.firstname = ko.observable(''); 
    self.lastname = ko.observable(''); 
    for (var i=0; i<self.gameofthrones().length; i++) { 
    self.gameofthrones()[i].fullname = ko.computed (function() { 
     return self.gameofthrones()[i].firstname+" "+self.gameofthrones()[i].lastname; 
    }) 
    }; 

    $('#classic').click(function() { 
    self.gameofthrones.push(
     {firstname: $('#fn').val(), lastname: $('#pr').val()} 
    ); 
    }); 
} 
ko.applyBindings(new viewModel());

HTML浏览：

<form class="" action="index.html" method="post"> 
    <input type="text" name="name" data-bind="value: firstname" id="fn"> 
    <input type="text" name="name" data-bind="value: lastname" id="pr"> 
    <button id="classic" type="button" name="Submit">Submit</button> 
</form> 

<div data-bind="foreach: gameofthrones"> 
    Firstname: <span data-bind="text: firstname"></span><br> 
    LastName: <span data-bind="text: lastname"></span><br> 
    Fullname: <span data-bind="text: fullname"></span><br><br> 
</div>

我是新来的淘汰赛JS和我停留在这一点上是有办法来显示观察到的阵列计算的名字和姓氏。感谢您提前帮忙。

答

如果您将全名计算函数添加到gameofthrone数组的每个对象，那么当您将新对象推送到数组时，您需要执行相同的操作，默认情况下它不会有一个。

有很多方法可以做到这一点，但我认为最简单的方法就是创建一个函数，以便在gameofthrone的可观察数组之外获取全名。然后使用$parent从foreach中调用该函数。

var viewModel = function() { 
 
    var self = this; 
 
    self.gameofthrones = ko.observableArray ([ 
 
    {firstname: 'Jon', lastname: 'Snow'}, 
 
    {firstname: 'Robb', lastname: 'Stark'} 
 
    ]); 
 
    self.getFullName = function(name){ 
 
    return name.firstname + " " + name.lastname; 
 
    } 
 
} 
 
ko.applyBindings(new viewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="foreach: gameofthrones"> 
 
    Firstname: <span data-bind="text: firstname"></span><br> 
 
    LastName: <span data-bind="text: lastname"></span><br> 
 
    Fullname: <span data-bind="text: $parent.getFullName($data) "></span><br><br> 
 
</div>

将可观察数据和计算数据推送到可观察数组

相关推荐