Knockout.js 可以協助你使用Model-View-ViewModel (MVVM) 模式構建UI.
本文以 http://learn.knockoutjs.com/ 提供的樣本為基礎,提供ScriptSharp版本的實現.
關於ScriptSharp快速入門的知識,請參考:http://www.cnblogs.com/laojia/archive/2011/09/29/2195611.html.
本樣本的ScriptSharp項目模板為Jquery Library,建完項目之後,需要手工添加位於ScriptSharp安裝資料夾下的Script.Knockout.dll的引用.
直接貼上代碼:
Page.cs
using System;using System.Runtime.CompilerServices;using jQueryApi;using KnockoutApi;using ScriptSharpKnockout.KnockoutTutorial;namespace ScriptSharpKnockout{ [GlobalMethods] internal static class Page { static Page() { jQuery.OnDocumentReady(delegate { Knockout.ApplyBindings(new ViewModel()); }); } }}
ViewModel.cs
using KnockoutApi;namespace ScriptSharpKnockout.KnockoutTutorial{ public class ViewModel { public Observable<string> FirstName = Knockout.Observable<string>("first Name"); public Observable<string> LastName = Knockout.Observable<string>("last Name"); public DependentObservable<string> FullName; public ViewModel() { FullName = Knockout.DependentObservable<string>( delegate { return "你好:" + FirstName.GetValue() + " " + LastName.GetValue(); }); } public void UpdateValue() { this.LastName.SetValue(this.LastName.GetValue().ToUpperCase()); } }}
index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title></title> <script type="text/javascript" src="../bin/Debug/mscorlib.debug.js"></script> <script type="text/javascript" src="../bin/Debug/jquery-1.6.2.js"></script> <script type="text/javascript" src="../bin/Debug/knockout-1.2.1.js"></script> <script type="text/javascript" src="../bin/Debug/ScriptSharpKnockout.debug.js"></script></head><body> <p> First name: <input data-bind="value:firstName" /></p> <p> Last name: <input data-bind="value:lastName" /></p> <p data-bind="text:fullName"> </p> <input type="button" value="update showInfo" data-bind="click:updateValue" /></body></html>
附上專案檔包以供下載測試:http://files.cnblogs.com/laojia/ScriptSharpKnockout.zip
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
