mvvm windows app DataBinding

时间:2023-03-08 17:21:55
前台html 绑定(view):
<div id="aa" data-win-bind="innerText:UserData.word" style="height: 40px; width: 100px; background: white; color: red"></div>
//js 实现 viewmodel
(function () {
"use strict"; WinJS.Binding.optimizeBindingReferences = true; var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation; app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
WinJS.Namespace.define("ViewModel", WinJS.Binding.as({
UserData: {
word: 'aaaaaa',
wordLength: null
}
})); document.querySelector("#btn").onclick = function () { var text = document.querySelector('#text').value;
ViewModel.UserData.word = text; //text 就可以用model 去获取,这里用 输入框代替了
}
}
args.setPromise(WinJS.UI.processAll().then(function () { return WinJS.Binding.processAll(document.querySelector('#aa'), ViewModel); }));
}
};
app.start();
})();