zoukankan      html  css  js  c++  java
  • 使用Knockout 绑定简单 json 对象

    近期 KO 这个js框架貌似要火,所以简单的学习了下,园子中的参考文章:

    http://www.cnblogs.com/n-pei/archive/2011/12/23/2299217.html 

    汤姆大叔的博客 KNOCKOUT 系列文章

    为了方便查阅,将大叔的这个系列文章 做成了CHM 有需的朋友们 请进入 传送点

    绑定实体类数据

    Html Form :

    <form id="xxoo">
          姓名:<input type="text" data-bind="value:truename" name="truename" id="txtTruename" />
          Email:<input type="text" data-bind="value:email" name="email" id="txtemail" />
    </form>
    

     还有很多的属性,这里就不略过啦~~~

    js Code:

      要使用ko 进行数据绑定,需要构造适合KO的对象。如下方式:

    var viewModel={
          truename:ko.observable("疯狂秀才"),
          email:ko.objservable('1055818239@qq.com')
    }
    

      当然,我们在后端代码也可以生成这样的json。如果不在后端写相关的程序,使用JSON.NET 将实体生成JSON对象是不符合KO使用的。所以

    我们需要在前端用JS 将实体对象构造成适合KO 使用的对象。你可以手写成上面的样子,但如果属性很多的话,很烦的,所以我们可以写个通用的方法。

     作法:

    function bindData(modelObj){
       if (modelObj) {
            var viewModel = {};
            for (var item in modelObj) {
                viewModel[item] = ko.observable(modelObj[item]);
            }
    
            ko.applyBindings(viewModel);
       }
    }
    

      这样就好啦,你有多少属性我都不怕啦~~,一个方法写好,处处作法!省力省心啊!

    上面的方法针对你的逻辑可能会有问题,你可以稍作修改。这个应该难不到陪明的你,我看好你哦!

    对啊,忘记说,要首选引入knockout.js 这个可以在 官网的首页下载

     

  • 相关阅读:
    vue 多层级嵌套组件传值 provide 和 inject
    vue 消息订阅与发布 实现任意组件间的通信
    成功
    疯掉的拼接
    解析发送
    一条条发
    com发送
    字符串拼接
    COM
    笨方法的combox级联
  • 原文地址:https://www.cnblogs.com/hxling/p/2581420.html
Copyright © 2011-2022 走看看