小编Gen*_*sky的帖子

多视图应用程序的knockoutjs模式示例

我正在构建一个包含两个复杂,明显不同(但有一些共享组件)视图的应用程序.一个视图允许用户运行查询并查看搜索结果,另一个视图概述最近的活动.相关示例可能是具有电子邮件屏幕和联系人屏幕的PIM应用程序.这两组操作完全不同,但之间也存在结构上的相似之处.在构建我的应用程序时,我已经开始使用搜索结果视图.我现在需要创建第二个,并且想知道组织代码的最佳实践.

我是否为每个应用程序"视图"创建了一个单独的对象(我认为是子视图模型),并使用if/ifnot绑定在它们之间切换?视图之间的一个共同点是每个视图都有一个可滚动,可过滤,可分页的对象列表.我应该尝试分解列表之间的差异,以便我可以有一个共同的排序/过滤器UI,或者我只创建两个只共享我的自定义绑定的并行接口?

谢谢,

基因

knockout.js

65
推荐指数
1
解决办法
3万
查看次数

将对象列表绑定到复选框列表

我有一个对象列表,每个对象都有几个字段,如下所示:

function Person(id,name,age) {
    this.id = id;
    this.name = name;
    this.age = age;
}

var listOfPeople = [
    new Person(1, 'Fred', 25),
    new Person(2, 'Joe', 60),
    new Person(3, 'Sally', 43)
];

var viewModel = {
    this.people = ko.observableArray(listOfPeople);
    this.selectedPeople = ko.observableArray([]);
}
Run Code Online (Sandbox Code Playgroud)

我想建立一个复选框列表,每个人一个,这些内容如下:

<ul data-bind="foreach: people">
    <li>
        <input type="checkbox" data-bind="value: id, checked: ?">
        <span data-bind="name"></span>
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我的困惑是,在checkbox data-bind属性中,我想引用所选对象(即person人或者id),以及所有选定人员的列表.我如何在foreach绑定范围内引用它?

我猜一个推论是:我如何引用绑定的对象?这里" this"似乎是绑定到窗口,而不是对象.

" checked敲除knockoutjs网站上的绑定 "的示例处理基元并使用命名模板.我对如何使用对象和匿名模板这样做很困惑.

knockout.js

39
推荐指数
1
解决办法
3万
查看次数

ConcurrentHashMap:使用"putIfAbsent"避免额外的对象创建?

我在多线程环境中聚合键的多个值.钥匙事先不知道.我以为我会这样做:

class Aggregator {
    protected ConcurrentHashMap<String, List<String>> entries =
                            new ConcurrentHashMap<String, List<String>>();
    public Aggregator() {}

    public void record(String key, String value) {
        List<String> newList =
                    Collections.synchronizedList(new ArrayList<String>());
        List<String> existingList = entries.putIfAbsent(key, newList);
        List<String> values = existingList == null ? newList : existingList;
        values.add(value);
    }
}
Run Code Online (Sandbox Code Playgroud)

我看到的问题是,每次运行此方法时,我都需要创建一个新的实例,ArrayList然后将其丢弃(在大多数情况下).这似乎是无理滥用垃圾收集器.是否有一种更好的,线程安全的方法来初始化这种结构而不必使用synchronizerecord方法?我对使该putIfAbsent方法不返回新创建的元素的决定感到有些惊讶,并且缺少一种延迟实例化的方法,除非它被调用(可以这么说).

java synchronization thread-safety concurrenthashmap

38
推荐指数
3
解决办法
2万
查看次数

将jquery ui对话与knockoutjs集成

我正在尝试为jquery ui对话框创建knockoutjs绑定,并且无法打开对话框.对话框元素已正确创建,但似乎没有删除display: none调用dialog('open').此外,调用dialog('isOpen')返回对话框对象而不是布尔值.

我使用最新的knockoutjs和jquery 1.4.4与jquery ui 1.8.7.我也用jQuery 1.7.1尝试了相同的结果.这是我的HTML:

<h1 class="header" data-bind="text: label"></h1>

<div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test'}">foo dialog</div>

<div>
    <button id="openbutton" data-bind="dialogcmd: {id: 'dialog'}" >Open</button>
    <button id="openbutton" data-bind="dialogcmd: {id: 'dialog', cmd: 'close'}" >Close</button>
</div>
Run Code Online (Sandbox Code Playgroud)

这是javascript:

var jQueryWidget = function(element, valueAccessor, name, constructor) {
    var options = ko.utils.unwrapObservable(valueAccessor());
    var $element = $(element);
    var $widget = $element.data(name) || constructor($element, options);
    $element.data(name, $widget);

};

ko.bindingHandlers.dialog = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            jQueryWidget(element, …
Run Code Online (Sandbox Code Playgroud)

jquery-ui jquery-ui-dialog knockout.js

37
推荐指数
2
解决办法
3万
查看次数

Firebase和索引/搜索

我正在考虑使用Firebase作为一个应用程序,人们应该使用全文搜索几千个对象的集合.我喜欢提供仅客户端应用程序的想法(不必担心托管数据),但我不知道如何处理搜索.数据将是静态的,因此索引本身并不是什么大问题.

我假设我需要一些运行查询的额外服务并返回Firebase对象句柄.我可以在某个固定的位置启动这样的服务,但后来我不得不担心它的可用性广告可扩展性.虽然我不希望这个应用程序有太多的流量,但它可以在几千个并发用户中达到峰值.

建筑思想?

firebase firebase-realtime-database

27
推荐指数
1
解决办法
1万
查看次数

如何捕获D3力布局中的击键事件?

我想回应针对力布局中节点的击键事件.我已经尝试添加我能想到的"击键","按键","键盘","键盘"的所有变体,但它们都没有发射.我的鼠标事件很好.我在d3源代码中找不到任何击键事件....有没有办法捕捉击键?

        nodes.enter().append("circle")
            .on("click", function(d) { return d.clickHandler(self); })
            .on("mouseover", function(d) { return d.mouseOverHandler(self); })
            .on("mouseout", function(d) { return d.mouseOutHandler(self); })
            .on("keyup", function(d) { 
                console.log("keypress", d3.event); // also tried "keyup", "keydown", "key"
            })
            .classed("qNode", true)
            .call(force.drag);
Run Code Online (Sandbox Code Playgroud)

d3.js force-layout

21
推荐指数
1
解决办法
2万
查看次数

触发beforeRemove,after在KnockoutJS中添加处理程序

我在使用KnockoutJs之前遇到了一些问题,并且在添加处理程序之后触发了.

这是相关的代码片段

function viewModel(list) {
    var self = this;

    this.items = ko.observableArray(list);

    this.removeItem = function(item) {
        self.items.remove(item);
    }

    this.removeFirst = function() {
        self.removeItem(self.items()[0]);
    };

    this.onRemove = function(elements) {
        console.log("Updating");
        $(elements).addClass('transition-out');
    };
}

ko.applyBindings(new viewModel(items));
Run Code Online (Sandbox Code Playgroud)

而这个标记

<button data-bind="click: removeFirst">Remove first</button>
<ul data-bind='foreach: items, beforeRemove: onRemove'>
    <li data-bind="text: name, click: $parent.removeItem"></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我看到列表更新但onRemove处理程序永远不会被触发.

我创建了一个JSFiddle来说明问题.

谢谢,

基因

knockout.js

10
推荐指数
1
解决办法
5207
查看次数

在knockoutjs中自动更新显示

如何在没有用户生成的事件的情况下显示和更新时间?这是我的开始,但我无法弄清楚如何让视图刷新.

function viewModel() {
    this.clock = ko.computed(function() { return new Date().getTime(); }, this).extend({ throttle: 1000 });

};

ko.applyBindings(new viewModel());
Run Code Online (Sandbox Code Playgroud)

使用以下HTML:

<span data-bind="text: clock"></span>
Run Code Online (Sandbox Code Playgroud)

这是jsfiddle.

knockout.js

9
推荐指数
1
解决办法
5388
查看次数

如何在knockoutjs中结合限制和订阅?

我有一个功能,它与服务器进行一些通信,以报告当前的屏幕几何形状等.

    function sendScreenLayout() { 
        logElementLocations(exp.getPageCoordinates());
    };
Run Code Online (Sandbox Code Playgroud)

我将此函数订阅到我的代码中的一些事件,如下所示:

viewModel.onLayoutChange.subscribe(sendScreenLayout);
$('#right-splitter > #mainContent').resize(sendScreenLayout);
$(window).resize(sendScreenLayout);
...
setTimeout(sendScreenLayout, 1);
Run Code Online (Sandbox Code Playgroud)

其中一些事件可能过于频繁地被发送,以便由服务器有效地处理,我想将请求限制在一些合理的速率.

我能想到的最好的是这样的:

var triggerSend = ko.observable();

ko.computed(function() {
    triggerSend();
    logElementLocations(exp.getPageCoordinates());
}).extend({throttle: 200});

function sendScreenLayout() {
    triggerSend.valueHasMutated();
}
Run Code Online (Sandbox Code Playgroud)

有没有更简洁的方法来捕捉这种模式,或者这是要走的路?

knockout.js

9
推荐指数
1
解决办法
4685
查看次数

Chrome扩展程序历史API

我正在编写一个Chrome扩展程序,需要分析特定选项卡的最近浏览历史记录.chrome.history API允许我搜索在全球历史上的项目,但似乎没有提供手段,结果定位到特定的标签.我错过了什么,或者这是不可能得到的?

tabs google-chrome-extension

8
推荐指数
1
解决办法
2216
查看次数