如何从HTML代码访问ViewModel对象的属性? [英] How to access property on object in viewmodel from html code?

问题描述

我有一个如下的viewmodel:

I hava a viewmodel as follow :

define(
    ['jquery', 'knockout', 'knockout.mapping', 'data/data', 'models/models'],
    function ($, ko, mapping, data, models) {
        var post =  {},

            getPost = function (param) {
                $.when(data.deferredRequest('postDetail', param.id))
                 .done(function (result) {
                     mapping.fromJS(result, {}, post);

                     console.log(result.title === post.title()); // ---> this is true
                     console.log(ko.isObservable(post.title));   // ---> this is true
                 });
            };

        return {
            post   : post,
            getPost: getPost
        };
    });

我想在html中显示title属性，如下所示:

I want to show title property in the html as follow :

<section id="section-post-detail" class="view" >
    <div class="page-header">
        <h3 data-bind="text: post.title"></h3>    <!-- show nothing -->
        <h3 data-bind="text: post().title"></h3>  <!-- error -->
        <h3 data-bind="text: post.title()"></h3>  <!-- error -->
    </div>
</section>

我尝试了三种方法来显示标题属性，但是所有这些都失败了. 我有什么想念吗?

I tried three ways to show title property, however all those are failed. Did I miss anything?

已编辑

我对源代码进行了如下调整. 我在viewmodel上添加了title属性，并在getPost中对其进行了更新，然后成功访问了viewmodel的title属性，而不是post模型上的title属性.

I tweaked source code as follow. I added title property on viewmodel and updated it inside the getPost and then I succesfully accessed the title property of the viewmodel, not title property on post model.

define(
        ['jquery', 'knockout', 'knockout.mapping', 'data/data', 'models/models'],
        function ($, ko, mapping, data, models) {
            var post =  {},
                title = ko.observable(''),     
                getPost = function (param) {
                    $.when(data.deferredRequest('postDetail', param.id))
                     .done(function (result) {
                         mapping.fromJS(result, {}, post);

                         title(post.title());                
                         console.log(result.title === post.title()); // ---> this is true
                         console.log(ko.isObservable(post.title));   // ---> this is true
                     });
                };

            return {
                post   : post,
                title  : title,
                getPost: getPost
            };
        });

<section id="section-post-detail" class="view" >
        <div class="page-header">
            <h3 data-bind="text: title"></h3>    
        </div>
    </section>

但是，如您所见，data-bind ="text:title"不是帖子的标题属性，而是viewmodel的title属性.这不是我想要的.我想访问帖子对象的title属性.

However, as you see data-bind="text: title" is not the title propery on post, but the title property on viewmodel. This is not what I want. I would like to acces title property on post object.

请更正我的同意.

推荐答案

我认为问题在于，您最初将viewmodel创建为空对象，如下所示:

I think the problem is that you are initially creating your viewmodel as an empty object, like this:

var post = {};

然后您尝试更新视图模型，如下所示:

And then you are trying to update the viewmodel, like this:

mapping.fromJS(result, {}, post);

但是，映射插件的文档位于 http://knockoutjs.com/documentation/plugins -mapping.html 似乎表明您应该像这样创建视图模型:

However, the documentation for the mapping plugin at http://knockoutjs.com/documentation/plugins-mapping.html seems to indicate that you should create the viewmodel like this:

var viewModel = ko.mapping.fromJS(data);
// or, in your case
var post = ko.mapping.fromJS(result);

然后，当您需要调用服务器以获取更新的数据时，可以执行以下操作:

Then, when you need to call the server to get updated data, you can do this:

ko.mapping.fromJS(data, viewModel);
// or, in your case
ko.mapping.fromJS(result, post);

我认为RP一直在考虑要考虑的重要事情是，只有在拥有数据之后才能创建视图模型.

The important thing to consider, which I think RP was driving at, is that you can't create the viewmodel until after you have the data.

这篇关于如何从HTML代码访问ViewModel对象的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！