新足迹

 找回密码
 注册

精华好帖回顾

· 【深夜碎碎念】1.5代/2代移民的自我认知 (2015-12-24) 奇思 · 北国初秋 -- 全文完 (2016-10-23) joaquin
· 少年运动员,足球,橄榄球和有趣的最后两张... (2010-7-26) Moh · [Karen 健康烘培] 富贵金黄,糯香南瓜派。 (2008-8-10) Tiger_Karen
Advertisement
Advertisement
查看: 1614|回复: 7

JS MVVM (knockout.js) [复制链接]

发表于 2011-4-24 22:15 |显示全部楼层
此文章由 showen 原创或转贴,不代表本站立场和观点,版权归 oursteps.com.au 和作者 showen 所有!转贴必须注明作者、出处和本声明,并保持内容完整
一个基于jQuery的js MVVM框架,目前版本1.2,感觉作者想法挺好的,对于不想转用silverlight的人来说,是个不错的选择。

http://knockoutjs.com/
Advertisement
Advertisement

发表于 2011-4-25 12:01 |显示全部楼层
此文章由 典 原创或转贴,不代表本站立场和观点,版权归 oursteps.com.au 和作者 典 所有!转贴必须注明作者、出处和本声明,并保持内容完整
初看了一下,似乎没有Server端方面的东西, 有点客户端的MVVM的意思吧。我觉得我们自己已经那样用了。

在客户端
1)把数据放在一个JSON Object中
2)用Jquery Data Link把JSON Data和UI 联系起来
3)用Template 来产生UI
跟silverlight 似乎没有什么关系

发表于 2011-4-25 18:51 |显示全部楼层
此文章由 showen 原创或转贴,不代表本站立场和观点,版权归 oursteps.com.au 和作者 showen 所有!转贴必须注明作者、出处和本声明,并保持内容完整
我是说这个js的MVVM框架和silverlight的MVVM pattern很类似

Jquery Data Link长时间处于beta,长时间没有bug fix,没有更新,没敢用在production,而且写这个插件的人是微软的说不定过两天就又把东西改了。

发表于 2011-5-11 10:48 |显示全部楼层

是个很好的东西,我在用,很爽,但有点小问题

此文章由 zbrong 原创或转贴,不代表本站立场和观点,版权归 oursteps.com.au 和作者 zbrong 所有!转贴必须注明作者、出处和本声明,并保持内容完整
请看完这两部分再动手试:1、代码; 2、问题所在。
1、代码:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.tmpl.min.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-1.2.0.js" type="text/javascript"></script>
    <script src="/Scripts/json2.js" type="text/javascript"></script>
</head>
<body>

<div id="anwserList" data-bind='template:{name:"personTmplRadios", foreach:persons}'></div>
<input type="button" onclick="gogo()" value="go go" />

<script id="personTmplRadios" type="text/html">
    <input type="text" data-bind="value:name" style="width: 385px" />  
    <input type="radio" name="good" data-bind="checked:isGood" />is good     <br />
</script>

<script type="text/javascript">
var person = function (thePerson, good) {
    return {
        name: ko.observable(thePerson),
        isGood: ko.observable(good)
    }
};

var viewModelPersons = {
    persons: ko.observableArray([
        new person("aaa", false),
        new person("bbb", false),
        new person("ccc", false)
    ])
};

ko.applyBindings(viewModelPersons)

function gogo() {
    alert(ko.toJSON(viewModelPersons))
}
</script>
</body>
</html>

2、问题所在:
我将obsevable字段绑定到radiobuttonlist,二者 应该保持同步更改,可是你看输出,数据只能从false被更改为on,而没有随着界面的变化从on更改为false。如果你先点击每个radio,再点击gogo按钮,结果输出全是on!

不知道是不是我哪里错了,望你有解决办法分享。

总体来说,我认为这是个好东西。

2010年度奖章获得者

发表于 2011-5-11 12:08 |显示全部楼层
此文章由 dalaohu 原创或转贴,不代表本站立场和观点,版权归 oursteps.com.au 和作者 dalaohu 所有!转贴必须注明作者、出处和本声明,并保持内容完整
在mvvm wpf 里标准的做法raido list是要bind 2样东西的

<ListView ItemsSource="{Binding Source={StaticResource People}}"
SelectedItem="{Binding SelectedPerson}">

ObservableCollection<Person> People 需要observable, 而SelectedPerson 无需observable,只是把选中的person赋值而已。

knockout.js 没用过,代会有空帮你看一看。
足迹 Reader is phenomenal. If you never used, you never lived 火速下载

发表于 2011-5-11 20:41 |显示全部楼层
此文章由 showen 原创或转贴,不代表本站立场和观点,版权归 oursteps.com.au 和作者 showen 所有!转贴必须注明作者、出处和本声明,并保持内容完整
可能radio button不太一样,我试过checkbox 挺好的
http://jsfiddle.net/QDunu/
Advertisement
Advertisement

发表于 2011-5-11 20:48 |显示全部楼层
此文章由 showen 原创或转贴,不代表本站立场和观点,版权归 oursteps.com.au 和作者 showen 所有!转贴必须注明作者、出处和本声明,并保持内容完整
关键就是这个checked attribute对于radio button是如何诠释的了,它的值on而不是true,很奇怪。

发表于 2011-5-11 23:32 |显示全部楼层

4楼的问题找到了

此文章由 zbrong 原创或转贴,不代表本站立场和观点,版权归 oursteps.com.au 和作者 zbrong 所有!转贴必须注明作者、出处和本声明,并保持内容完整
showen你好
关于我在4楼展示的问题,我同时也问过knockout的发布人史蒂夫.桑德森,他指出了我的问题所在:
我“将一组value相同的radio分别绑定到了不同的data”,而正确的做法恰好相反,是要“将一组value不同的radio绑定到同一个data”,当然这组radio要有相同的name。
也就是正如你所说,我对radio的checked属性的理解偏离了该属性的实质。

[ 本帖最后由 zbrong 于 2011-5-11 23:34 编辑 ]

发表回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则

Advertisement
Advertisement
返回顶部