0
私はknockout.jsを学んでいます。モデルがトップレベルのオブジェクトでない場合、ノックアウトにモデルをバインドする方法はありますか？
私は
windowオブジェクトの内部だけで1つのトップレベルのオブジェクトがありますので、グローバルスコープを最小限に抑えるために、コードを組織し、私はそこに私のモデルを含むすべてをかける：私は、私は二つの方法で変更しようとしていますone example earlierを、やりました。モデルが観察可能でない場合、モデルが変更されたときに、
text:バインディングがビューを変更するかどうかを確認したいと考えました。このアイデアをより精緻化するため、以下のHTMLコードのコメントをご覧ください。
私はこのコードのビットを実行したときしかし、私はそれが原因で私のmodelオブジェクトはもはやwindowオブジェクトのトップレベルのメンバーであるという事実であると仮定していますReferenceError: friend is not defined.
を取得。
このようなモデル階層を持ち、ノックアウトで動作させることは可能ですか？モデルインサイドウィンドウ
、しかし、私が作る場合はオブジェクトのトップレベルを作る
1a.html
<html>
<head>
<meta charset="utf-8"/>
<script type='text/javascript' src='knockout-3.4.0.js'></script>
</head>
<!-- The purpose of this program is to find out whether just a
text: binding also changes the display/view if the model changes.
Meaning if I explicitly do not create an observable out of a model property
and use only a text: binding, does the property still behave like an observable?
To do this, I am using the same code as 1.html and 1.js,
except for one change. I am adding another set of textboxes
in which I will type in a new first name and last name.
Then, I will click the "Update Name" button
in whose listener, I will update the model properties friend.firstName
and friend.lastName.
Then, I'd like to see if the text box values for txtFirstName and txtLastName
change.
-->
<body>
<form id = "frm" name = "frm">
<fieldset>
<legend>Your friend's basic information:</legend>
<div>
<label for = "FirstName">First Name</label>
<input type = "text" name = "FirstName" id = "txtFirstName" data-bind = "value: friend.firstName" />
</div>
<div>
<label for = "LastName">Last Name</label>
<input type = "text" name = "LastName" id = "txtLastName" data-bind = "value: friend.lastName" />
</div>
<fieldset>
<legend>New Information:</legend>
<div>
<label for = "NewFirstName">New Value for First Name</label>
<input type = "text" name = "NewFirstName" id = "txtNewFirstName" />
</div>
<div>
<label for = "NewLastName">New Value for Last Name</label>
<input type = "text" name = "NewLastName" id = "txtNewLastName" />
</div>
</fieldset>
<div>
<input type = "button" value = "Update Name" id = "btnUpdateName" name = "Save" />
</div>
</fieldset>
</form>
<script type='text/javascript' src='1a.js'></script>
</body>
</html>
1a.js
var ThisDocument = function()
{
this.model =
{
friend :
{
firstName : 'Sathyaish',
lastName : 'Chakravarthy'
}
};
this.init = function()
{
wire(window, "load", wireElementHandlers);
};
function wire(element, eventName, listener)
{
var ie = document.all ? true : false;
if (!element) throw new Error("Element " + element + " not found.");
if (ie)
{
element.attachEvent("on" + eventName, listener);
}
else
{
element.addEventListener(eventName, listener, false);
}
};
function wireElementHandlers()
{
var btnUpdateName = document.getElementById('btnUpdateName');
wire(btnUpdateName, "click", changeName);
ko.applyBindings(this.model);
};
function changeName(event)
{
var firstName = document.getElementById('txtNewFirstName').value;
var lastName = document.getElementById('txtNewLastName').value;
this.model.friend.firstName = firstName;
this.model.friend.lastName = lastName;
};
};
var thisDocument = new ThisDocument();
thisDocument.init();
内のトップレベルメンバーをモデル化します。オブジェクトでは、コードは正常に動作し、上のHTMLコメントと上の箇条書きのポイント＃2で説明されている質問への回答を知ることができます。
答えは：いいえ。観察可能なものがなければ、単純なtext:バインディングは、モデルが変更されたときにビューを更新しません。ここ
トップレベルのオブジェクトとしてモデルとコードである：
1a.js
this.model =
{
friend :
{
firstName : 'Sathyaish',
lastName : 'Chakravarthy'
}
};
var ThisDocument = function()
{
this.init = function()
{
wire(window, "load", wireElementHandlers);
};
function wire(element, eventName, listener)
{
var ie = document.all ? true : false;
if (!element) throw new Error("Element " + element + " not found.");
if (ie)
{
element.attachEvent("on" + eventName, listener);
}
else
{
element.addEventListener(eventName, listener, false);
}
};
function wireElementHandlers()
{
var btnUpdateName = document.getElementById('btnUpdateName');
wire(btnUpdateName, "click", changeName);
ko.applyBindings(model);
};
function changeName(event)
{
var firstName = document.getElementById('txtNewFirstName').value;
var lastName = document.getElementById('txtNewLastName').value;
model.friend.firstName = firstName;
model.friend.lastName = lastName;
};
};
var thisDocument = new ThisDocument();
thisDocument.init();
従って、私の疑いがthisポインタが台無しにされていることです。
applyBindingsメソッドのオーバーロードがありますか、モデルをバインドするときに特定のオブジェクトをthisパラメータとして使用するようにノーオーバーに通知するオーバーロードがない場合、別の方法ですか？
var MyDocument = function()
{
var model =
{
friend : { firstName: 'Sathyaish', lastName: 'Chakravarthy' }
};
this.init : function()
{
ko.applyBindings(this.model /*, but this may lead knockout
to not be able to discover my model, as my experience so far
shows. I need to recalibrate the 'this' pointer so knockout
knows to look for the model object inside whatever I tell it to,
i.e. inside an instance of the MyDocument class and not inside
whatever the this pointer happens to reference when knockout
is performing the binding. */);
};
}
var myDocument = new MyDocument();
myDocument.init();