knockout 学习使用笔记----绑定map--双向绑定

简单的方式,使用 knockout.mapping.js。

1、引入knockout.mapping.js。

2、声明模型

var model = {
    task:null,
    feedbacks:[],
    feedbackPhotos:null
}

3、mapping 绑定

var viewModel = ko.mapping.fromJS(model);

4、声明绑定

$(function() {
    ko.applyBindings(viewModel);
    initData();
})

5、赋值

viewModel.task(result.data);

6、使用

<div id="form" data-bind="with:task">
        <div id="form-head">
            <div id="form-head-inner">
                <div id="form-title" class="horizontal">
                    <span data-bind="text:taskName+‘【‘+taskId+‘】‘"></span>
                </div>
                <div id="form-action">

                </div>
            </div>
        </div>
<div class="container" data-bind="foreach:feedbacks">
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            <div class="section-title">
                                                <h1 class="heading bold" data-bind="html:moment(feedbackPlanTime).format(‘YYYY-MM-DD‘)"></h1>
                                            </div>
                                        </div>
                                    </div>
时间: 2024-08-26 08:29:46

knockout 学习使用笔记----绑定map--双向绑定的相关文章

深入学习AngularJS中数据的双向绑定机制

来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中,

Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数)

版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 参照链接: http://cn.vuejs.org/guide/index.html [起步]部分 本文是在其基础上进行补全和更详细的探寻 嗯,根据朋友的建议,我改投vue阵营了 (一)单向绑定 [javascript] view plain copy <div id="app"> {{ message }} </div> <script> new Vue

深度学习论文笔记--Depth Map Prediction from a Single Image using a Multi-Scale Deep Network

阅读时间:2015.04.26 论文源:NIPS2014 作者及单位: David Eigen  [email protected] Christian Puhrsch  [email protected] Rob Fergus [email protected] 纽约大学 主要内容:通过CNN来进行对单张图片进行深度估计,单张图片进行深度信息估计做的人比较少,一般是用双目摄像头做的.在这里,作者把CNN当作一个黑盒来看待,用CNN来直接学习图像到它的深度图像信息的映射. 创新点: 正如文章题目

由自定义事件到双向绑定

前言 除了大家经常提到的自定义事件之外,浏览器本身也支持我们自定义事件,我们常说的自定义事件一般也都是用于项目中的一些通知机制,例如双向绑定.一起看一下如何实现自定义事件,以及基于观察者模式的双向绑定的基本原理. 浏览器自定义事件 定义 除了我们常见的click,touch等事件之外,浏览器支持我们定义和分发自定义事件. 创建也十分简单: //创建名为test的自定义事件 var event = new Event('test') //如果是需要更多参数可以这样 var event = new

深入理解Proxy 及 使用Proxy实现vue数据双向绑定

阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.has(target, propKey) 5.construct(target, args, newTarget): 6.apply(target, object, args) 7.使用Proxy实现简单的vue双向绑定 回到顶部 1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解

C#使用Xamarin开发可移植移动应用(3.进阶篇MVVM双向绑定和命令绑定)附源码

前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 嗯..前面3篇就是基础内容..后面就开始逐渐要加深了,进阶篇开始了. 今天的学习内容? 今天我们讲讲Xamarin中的MVVM双向绑定,嗯..需要有一定的MVVM基础.,具体什么是MVVM - -,请百度,我就不多讲了 效果如下: 正文 1.简单的入门Demo 这个时间的功能很简单,就是一个时间的动态显示.

【WPF学习】第二十九章 元素绑定——将元素绑定到一起

原文:[WPF学习]第二十九章 元素绑定--将元素绑定到一起 数据banding的最简单情形是,源对象时WPF元素而且源属性是依赖性属性.前面章节解释过,依赖项属性具有内置的更改通知支持.因此,当在源对象中改变依赖项属性的值时,会立即更新目标对象中的绑定属性.这正是我们所需要的行为--而且不必为此构建任何额外的基础结构. 为理解如何将一个元素绑定到另一个元素,下面创建一个简单的示例.该示例窗口包含了两个控件:一个Slider控件和一个具有单行文本的TextBlock控件.如果向右拖动滑动条上的滑

vue之v-model表单输入双向绑定

vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V是View的简写,VM就是ViewModel. 单向绑定和双向绑定的区别: 单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新. 有单向绑定,就有双向绑定. 如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向

AngularJS学习笔记(一) 关于MVVM和双向绑定

写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之类的鸡肋就能看出来了.所以搞得ng很大.. 更主要的是,ng用一种和之前完全不同的思维方式去组织代码,它就是Model-View-ViewModel(MVVM). 这篇文章结构大概是1.MVVM和双向绑定 2.简单的购物金额计算的例子(转自miaov视频).如有问题还请看客斧正.^_^ 1.MVVM