3
knockoutjs으로 조금 놀았으며 자바 스크립트에서 이러한 뷰 모델을 작성하여 훨씬 간단하고 선언적 방식으로 볼 수 있도록 다음 예제를 충분히 만들었습니다. 즉 처음에는 을 정의합니다. 당신은을 관찰하고, data-bind 속성은 을 정의합니다. 특정 방식으로 뷰 모델이 변경 될 때 수행 할 작업을 정의하십시오.KnockoutJS를 사용하여 AJAX를 통해 서버의 데이터를 관찰하는 방법은 무엇입니까?
하지만이 모든 것은 클라이언트에서만 발생합니다.
knockoutjs를 사용하여 서버의 객체 상태를 관찰하려면 어떻게해야합니까? AJAX 통화를 통해?
있는 index.htm :
<!doctype html>
<html>
<title>Knockout example</title>
<head>
<script type="text/javascript" src="js/knockout-1.1.1.debug.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body>
<!-- FIRST AREA -->
<div class="infobox">
<div data-bind="visible: noNamesFilled">
<p>This is an example with NO names filled.</p>
</div>
<div data-bind="visible: bothNamesFilled">
<p>This is an example with both names filled.</p>
</div>
<div data-bind="visible: firstNameOnlyFilled">
<p>This is an example with only the first name filled.</p>
</div>
<div data-bind="visible: lastNameOnlyFilled">
<p>This is an example with the last name filled but not the first name</p>
</div>
</div>
<!-- SECOND AREA -->
<p>First name: <input data-bind="value: firstName, valueUpdate:'afterkeydown'" /></p>
<p>Last name: <input data-bind="value: lastName, valueUpdate:'afterkeydown'" /></p>
<div data-bind="visible: bothNamesFilled">
<h2 class="normal">Hello, <span data-bind="text: fullName"></span>.</h2>
</div>
<div data-bind="visible: firstNameOnlyFilled">
<h2 class="informal">Hi there <span data-bind="text: fullName"></span>!</h2>
</div>
<div data-bind="visible: lastNameOnlyFilled">
<h2 class="formal">Hello, Mr. <span data-bind="text: fullName"></span>.</h2>
</div>
<!-- THIRD AREA -->
<div data-bind="visible: noNamesFilled">
<p><span class="bad">:-(</span> Please fill in both names.</p>
</div>
<div data-bind="visible: bothNamesFilled">
<p><span class="good">:-)</span> Good job, both names are filled!</p>
</div>
<div data-bind="visible: firstNameOnlyFilled">
<p><span class="ok">:-(</span> Please fill in the last name, too.</p>
</div>
<div data-bind="visible: lastNameOnlyFilled">
<p><span class="ko">:-(</span> Please fill in the first name as well.</p>
</div>
</body>
</html>
main.css가 :
* { margin: 0; padding: 0}
body { margin: 10px}
p { margin: 10px}
.infobox {
background-color: #eee;
width: 300px;
height: 100px;
padding: 10px;
}
.informal {
color: purple;
font-family: arial;
}
.normal {
color: black;
font-family: new courier;
}
.formal {
color: black;
font-size: 11pt;
font-family: times roman;
background-color: #eee;
}
.good {
width: 20px;
background-color: lightgreen;
}
.ok {
width: 20px;
background-color: yellow;
}
.bad {
width: 20px;
background-color: tomato;
}
main.js :
window.onload= function() {
var viewModel = {
firstName : ko.observable(''),
lastName : ko.observable('')
};
viewModel.fullName = ko.dependentObservable(function() {
return viewModel.firstName() + " " + viewModel.lastName();
});
viewModel.bothNamesFilled = ko.dependentObservable(function() {
return viewModel.firstName().length > 0 && viewModel.lastName().length > 0;
}, this);
viewModel.firstNameOnlyFilled = ko.dependentObservable(function() {
return viewModel.firstName().length > 0 && viewModel.lastName().length == 0;
}, this);
viewModel.lastNameOnlyFilled = ko.dependentObservable(function() {
return viewModel.firstName().length == 0 && viewModel.lastName().length > 0;
}, this);
viewModel.noNamesFilled = ko.dependentObservable(function() {
return viewModel.firstName().length == 0 && viewModel.lastName().length == 0;
}, this);
ko.applyBindings(viewModel);
}