私は次のようなビューモデルを持っています:
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にタイトルプロパティを表示したい:
<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>
title プロパティを表示する 3 つの方法を試しましたが、すべて失敗しました。何か見逃しましたか?
編集済み
以下のようにソースコードをいじりました。ビューモデルにタイトル プロパティを追加し、getPost 内で更新した後、ポスト モデルのタイトル プロパティではなく、ビューモデルのタイトル プロパティに正常にアクセスしました。
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" は投稿のタイトル プロパティではなく、ビューモデルのタイトル プロパティです。これは私が望むものではありません。post オブジェクトの title プロパティにアクセスしたいと思います。
私のアプローチを修正してください。