绑定observable的子属性时，未获取View中的所有值

Not getting all values in View when binding children properties of observable

本文关键字：View 获取 observable 属性 绑定      更新时间：2023-09-26

在我的敲除绑定视图中，我没有得到所有值。

这是我的脚本文件：

var ViewModel = function () {
    var self = this;
    self.games = ko.observableArray();
    self.error = ko.observable();
    self.detail = ko.observable();
    var gamesUri = '/api/games/';
    self.getGameDetail = function (item) {
        ajaxHelper(gamesUri + item.Id, 'GET').done(function (data) {
            self.detail(data);
        });
        console.log(self.detail);
    };
    function ajaxHelper(uri, method, data) {
        self.error('');
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }
    function getAllGames() {
        ajaxHelper(gamesUri, 'GET').done(function (data) {
            self.games(data);
        });
    }
    getAllGames();
};
ko.applyBindings(new ViewModel());

这是我的观点：

<div class="row">
    <div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="panel-title">Games</h2>
        </div>
        <div class="panel-body">
            <ul class="list-unstyled" data-bind="foreach: games">
                <li>
                    <strong><span data-bind="text: DeveloperName"></span>:<span data-bind="text: Title"></span></strong>
                    <small><a href="#" data-bind="click: $parent.getGameDetail">Details</a></small>
                </li>
            </ul>
        </div>
    </div>
        <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
    </div>
    <div class="col-md-4">
       <div class="panel panel-default">
           <div class="panel-heading"><h2 class="panel-title">Details</h2></div>
       </div>
        <table class="table">
            <tr><td>Developer</td><td data-bind="text: detail().DeveloperName"></td></tr> //Only this value is displayed
            <tr><td>Title</td><td data-bind="text: detail().Title"></td></tr>
            <tr><td>Price</td><td data-bind="text: detail().Price"></td></tr>
            <tr><td>Genre</td><td data-bind="text: detail().Genre"></td></tr>
            <tr><td>Year</td><td data-bind="text: detail().Year"></td></tr>
        </table>
    </div>
    <div class="col-md-4">
    </div>
</div>

问题是它只在视图中显示DeveloperName。Title、Price、Genre和Year未在视图中显示。我尝试了很多方法，但我不知道错误在哪里。

有两种方法。

最简单的方法是使用with或template绑定。该技术类似，但我将展示一个具有with绑定的示例：

<table class="table" data-bind="with: details">
   <tr><td>Developer</td><td data-bind="text: DeveloperName"></td></tr>
   <tr><td>Title</td><td data-bind="text: Title"></td></tr>
   <tr><td>Price</td><td data-bind="text: Price"></td></tr>
   <tr><td>Genre</td><td data-bind="text: Genre"></td></tr>
   <tr><td>Year</td><td data-bind="text: Year"></td></tr>
</table>

使用此技术，无论何时更改details可观察对象内的对象，新值都会应用于具有with绑定的elment内的子元素。在这种情况下，CCD_ 11元素内部的所有元素。此外，语法更短、更清晰注意：如果需要绑定与with绑定的对象之外的内容，则必须使用$parent、$parents[]或$root

最困难的是，只有当你的视图模型更复杂并且具有计算的可观察性时，这才是必要的，例如，你需要创建一个属性也是可观察器的对象。在这种情况下，您绑定该对象一次，然后在接下来的情况下，更新innser可观测属性，而不是更改对象本身。

对于您的示例，您必须创建一个对象，该对象的所有属性（如DeveloperName、Title、Price等）都定义为可观察性。然后，您必须将AJAX恢复的值映射到此属性，您可以手动、执行details().DeveloperName(newDetails.DeveloperName)等操作，也可以使用ko.mapping插件。

重要提示：如果使用此技术，则必须保留原始details绑定对象，并更新其属性。如果用新对象替换details对象本身，则绑定将丢失，并将根据需要停止工作

另一个注意事项：您不能使用cleanNodes来处理您的想法。请看这个问答；A.

相关文章：