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

问题描述

我有一个视图模型如下:

定义(['jquery'，'knockout'，'knockout.mapping'，'数据/数据'，'模型/模型']，函数($，ko，映射，数据，模型){var post = {},getPost = 函数(参数){$.when(data.deferredRequest('postDetail', param.id)).done(功能(结果){mapping.fromJS(result, {}, post);console.log(result.title === post.title());//--->这是真实的console.log(ko.isObservable(post.title));//--->这是真实的});};返回 {发布:发布，获取邮递:获取邮递};});

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

</节>

我尝试了三种方法来显示标题属性，但都失败了.我错过了什么吗?

<小时>

已编辑

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

定义(['jquery'，'knockout'，'knockout.mapping'，'数据/数据'，'模型/模型']，函数($，ko，映射，数据，模型){var post = {},title = ko.observable(''),getPost = 函数(参数){$.when(data.deferredRequest('postDetail', param.id)).done(功能(结果){mapping.fromJS(result, {}, post);标题(post.title());console.log(result.title === post.title());//--->这是真实的console.log(ko.isObservable(post.title));//--->这是真实的});};返回 {发布:发布，标题:标题，获取邮递:获取邮递};});<section id="section-post-detail" class="view" ><div class="page-header"><h3 data-bind="text: title"></h3>

</节>

然而，正如你所见，data-bind="text: title" 不是 post 上的 title 属性，而是 viewmodel 上的 title 属性.这不是我想要的.我想访问 post 对象的 title 属性.

请纠正我的做法.

解决方案

我认为问题在于您最初将视图模型创建为一个空对象，如下所示:

var post = {};

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

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

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

var viewModel = ko.mapping.fromJS(data);//或者，在你的情况下var post = ko.mapping.fromJS(result);

然后，当你需要调用服务器获取更新的数据时，你可以这样做:

ko.mapping.fromJS(data, viewModel);//或者，在你的情况下ko.mapping.fromJS(result, post);

需要考虑的重要一点，我认为 RP 正在推动的是，在您拥有数据之前，您无法创建视图模型.

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
        };
    });

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?

---

Edited

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>

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.

Please correct my approacth.

解决方案

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);

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);

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屋！