首页 > PHP资讯 > HTML5培训技术 > knockoutjs学习篇(一)

knockoutjs学习篇(一)

HTML5培训技术
接触Knockoutjs
学习了一天的angualar后才恍然大悟,哦,这呀不支持IE7,估摸这在IE8上也有很多bug,虽果断放弃,这与中国特色的社会主义相悖。于是转而投向Knockout js的怀抱!
 
仿angular官方教程
knockoutjs官网都是知识点,没看到像angular官网上一步步打造一个小app这样的教程。遂仿造着玩玩。也许两者根本不具有可比性。编码过程中有些疑问,希望能够得到解答!
 
 
 
1、基础准备
 
引入相关js库。准备数据和相关实体类,这个过程没必要说了。
 
 
public class Phone
    {
        public int age { get; set; }
 
        public string id { get; set; }
 
        public string imageUrl { get; set; }
 
        public string name { get; set; }
 
        public string snippet { get; set; }
    }
 2、准备api返回json数据。
 
 
public JsonResult Phones(string query, string field)
        {
            var list = DataFactory.GetPhones();
            if (!string.IsNullOrWhiteSpace(query))
            {
                list = list.Where(f => f.name.ToLower().Contains(query.ToLower()) || f.snippet.ToLower().Contains(query.ToLower())).ToList();
            }
 
            list = field == "name" ? list.OrderBy(f => f.name).ToList() : list.OrderBy(f => f.age).ToList();
 
            return Json(list, JsonRequestBehavior.AllowGet);
        }
 3、准备页面 index.cs
 
                   

               
           
            <script src="~/Scripts/ViewModel/controller.js">《script》
       
   
 
 
js代码部分。
 
 
<script src="~/Scripts/ViewModel/controller.js">《script》
    《script》
        var vm = new viewModel();
        ko.applyBindings(vm);
        vm.doSearch();
 
        //订阅变化通知
        vm.queryText.subscribe(function (newValue) {
            vm.doSearch();
        });
        vm.sortFiled.subscribe(function (newValue) {
            vm.doSearch();
        });
《script》
 
 
 
4、编写controller.js
 
 
var viewModel = function () {
    var self = this;
 
    self.phones = ko.observableArray();
    self.sortByOptions = [{
        text: '按名称排序',
        filed: 'name'
    }, {
        text: '按日期排序',
        filed: 'age'
    }];
    //选中的排序字段
    self.sortFiled = ko.observable('age');
 
    self.queryText = ko.observable('');
 
    //查询和排序
    self.doSearch = function () {
        var sortField = self.sortFiled();
        var query = self.queryText();
 
        $.getJSON('/home/phones?query=' + query + '&field=' + sortField, function (data) {
            self.phones(data);
        });
    }
}
 
 
上一篇:在jQueryMobile中实现多语言支持
下一篇:js将面向过程方式改成相应的面向对象形式的比较

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持49不支持0