ノックアウト JS バインディングの問題で立ち往生しています。シングル ページ アプリケーションのシェル ページにバインドされたマスター ビューモデルがあります。この masterviewmodel は、現在表示されているビューを制御します (Sammy JS を使用)。また、ビューにバインドされたサブ ビューモデルへの参照も保持します。
var app = function () {
var self = this;
self.State = ko.observable('home');
self.Home = ko.observable(new homepageVm());
self.User = ko.observable(new userInfoVm());
self.Request = ko.observable(new requestVm());
};
User ビューモデルには、次のようにバインドするビューが 1 つあります。
<div data-bind="with: User, visible: State() === 'user'">
.. snip ..
</div>
with:バインディングは、適切なサブビューモデルがビューにバインドされていることを確認します。このアプローチは、home ビューと userinfo ビューの両方でうまく機能します。
requestVm はウィザード スタイルの UI を使用し、複数のビューにバインドする必要があります。これは私が現在立ち往生しているところです。
<div data-bind="with: Request, visible: State() === 'request-step-1'">
.. snip ..
</div>
<div data-bind="with: Request, visible: State() === 'request-step-2'">
.. snip ..
</div>
<div data-bind="with: Request, visible: State() === 'request-step-3'">
.. snip ..
</div>
サイトを起動すると、バインドは正常に機能しているように見えます (Knockout はバインド エラーをスローしていません)。それらにバインドされた単一のビュー (ユーザー VM など)。
ウィザードの最初のステップのビューのみを含めると、Request VM に 3 つではなく 1 つのバインディングしか残らず、アプリ内のすべてのバインディングが再び機能し始めます。
何がこれを引き起こしているのか、私は迷っています。ノックアウトは、1 つのオブザーバブルを 1 つの要素にのみバインドできますか? または、サポートされていないことを試していますか?
更新: VM の observableArrays で何かが起こっているようです。単純なオブザーバブルへのバインディングは正常に機能します。
VM の 1 つを次に示します。
function userInfoVm() {
var self = this;
self.UserName = ko.observable();
self.Beun = ko.observable();
self.LoadingUser = ko.observable(false);
self.LoadingObjects = ko.observable(false);
self.UserData = ko.observableArray([]);
self.UserObjects = ko.observableArray([]);
self.LoadUser = function (userName) {
self.LoadingUser(true);
$.get('UserData/UserDetail', { username: userName }, function (details) {
self.UserData(details);
self.Beun(JSON.stringify(details));
self.LoadingUser(false);
});
};
self.LoadObjects = function (userName) {
self.LoadingObjects(true);
$.get('UserData/UserObjects', { username: userName }, function (objects) {
alert(JSON.stringify(objects));
self.UserObjects([objects]);
self.LoadingObjects(false);
});
};
self.Load = function (userName) {
self.UserName(userName);
self.UserData(null);
self.UserObjects(null);
self.LoadUser(userName);
self.LoadObjects(userName);
};
};
そして、上記の VM からのデータを消費しているビュー:
<div data-bind="with: User, visible: State() === 'user'">
<h1>
<button class="backbutton" onclick="history.back();">
</button>
Details for user <span data-bind="text: UserName"></span>
</h1>
<div class="display detail">
<table>
<tbody data-bind="foreach: UserData">
<tr>
<td class="property" data-bind="text: Key">
</td>
<td class="value" data-bind="text: Value">
</td>
</tr>
</tbody>
</table>
<div class="loader" data-bind="visible: LoadingUser">
Please wait while we process your request...
</div>
</div>
<div class="display detail">
<h1>
Objects and services for user <span data-bind="text: UserName"></span>
</h1>
<table class="detailtable">
<tbody data-bind="foreach: UserObjects">
<tr>
<td class="value">
<a class="service" data-bind="text: Value, attr: { href: '#/service/' + Key }" href="#">
</a>
</td>
</tr>
</tbody>
</table>
<div class="loader" data-bind="visible: LoadingObjects">
Please wait while we process your request...
</div>
</div>
Details for user <span data-bind="text: Beun"></span>
</div>
配列は、供給されたデータについて UI に通知していません。AJAX 呼び出しからの文字列化されたデータを含む .Beun を含む他のオブザーバブルは、期待どおりに更新されます。