javascript - 绑定(bind) observable 的子属性时未获取 View 中的所有值

Question

在我的 knockout 绑定(bind) View 中，我没有获得所有值。

这是我的脚本文件:

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>

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

Answer 1

有两种方法。

最简单的方法是使用 with 或 template 绑定(bind)。技术类似，但我将展示一个使用 with 绑定(bind)的示例:

<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 绑定(bind)的 elment 内的子元素。在本例中，table 元素内的所有元素。此外，语法更短、更清晰。 注意:如果您需要绑定(bind)对象绑定(bind)之外的内容，则必须可以使用 $parent、$parents[] 或 $root与与。

最难的一个，只有当您的 View 模型更复杂并且具有例如计算的可观察值时才需要，您需要创建一个其属性也是可观察值的对象。在这种情况下，您绑定(bind)该对象一次，并且在接下来的情况下，您更新 innser 可观察的属性，而不是更改对象本身。

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

重要提示:如果您使用此技术，则必须保留原始 details 绑定(bind)对象，并更新其属性。如果您用新对象替换 details 对象本身，绑定(bind)将会丢失，并且将停止按需要工作。

另一个注意事项:你不能按照你的想法使用 cleanNodes。请参阅this Q&A .