脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-knockoutjs学习篇(一)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 接触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.cshtML

 

 

<p class="container-fluid">

    <p class="row-fluid">

        <p class="span2">

            <!--sidebar content-->

 

            SeArch:

            <input type="text" data-bind="value: queryText">

            Sort by:

            <select data-bind="options: sortByOptions, optionsText:&#39;text', optionsValue: 'filed', value: sortFiled">

            </select>

 

        </p>

        <p class="span10">

            <!--Body content-->

 

            <ul class="phones" data-bind="foreach:{data:phones,as:'phone'}">

                <li class="thumbnail phone-listing">

                    <a href="#" class="thumb">

                        <img data-bind="attr:{src:phone.imageUrl}" />

                    </a>

                    <a href="#" data-bind="text:phone.name"></a>

 

                    <p data-bind="text:phone.snippet"></p>

                </li>

            </ul>

            <script src="~/Scripts/ViewModel/controller.js"></script>

        </p>

    </p>

</p>

 

 

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);

        });

    }

}

 

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-knockoutjs学习篇(一)全部内容，希望文章能够帮你解决javascript代码实例教程-knockoutjs学习篇(一)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。