我正在构建一个包含两个复杂,明显不同(但有一些共享组件)视图的应用程序.一个视图允许用户运行查询并查看搜索结果,另一个视图概述最近的活动.相关示例可能是具有电子邮件屏幕和联系人屏幕的PIM应用程序.这两组操作完全不同,但之间也存在结构上的相似之处.在构建我的应用程序时,我已经开始使用搜索结果视图.我现在需要创建第二个,并且想知道组织代码的最佳实践.
我是否为每个应用程序"视图"创建了一个单独的对象(我认为是子视图模型),并使用if/ifnot绑定在它们之间切换?视图之间的一个共同点是每个视图都有一个可滚动,可过滤,可分页的对象列表.我应该尝试分解列表之间的差异,以便我可以有一个共同的排序/过滤器UI,或者我只创建两个只共享我的自定义绑定的并行接口?
谢谢,
基因
我有一个对象列表,每个对象都有几个字段,如下所示:
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网站上的绑定 "的示例处理基元并使用命名模板.我对如何使用对象和匿名模板这样做很困惑.
我在多线程环境中聚合键的多个值.钥匙事先不知道.我以为我会这样做:
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然后将其丢弃(在大多数情况下).这似乎是无理滥用垃圾收集器.是否有一种更好的,线程安全的方法来初始化这种结构而不必使用synchronize该record方法?我对使该putIfAbsent方法不返回新创建的元素的决定感到有些惊讶,并且缺少一种延迟实例化的方法,除非它被调用(可以这么说).
我正在尝试为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) 我正在考虑使用Firebase作为一个应用程序,人们应该使用全文搜索几千个对象的集合.我喜欢提供仅客户端应用程序的想法(不必担心托管数据),但我不知道如何处理搜索.数据将是静态的,因此索引本身并不是什么大问题.
我假设我需要一些运行查询的额外服务并返回Firebase对象句柄.我可以在某个固定的位置启动这样的服务,但后来我不得不担心它的可用性广告可扩展性.虽然我不希望这个应用程序有太多的流量,但它可以在几千个并发用户中达到峰值.
建筑思想?
我想回应针对力布局中节点的击键事件.我已经尝试添加我能想到的"击键","按键","键盘","键盘"的所有变体,但它们都没有发射.我的鼠标事件很好.我在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) 我在使用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来说明问题.
谢谢,
基因
如何在没有用户生成的事件的情况下显示和更新时间?这是我的开始,但我无法弄清楚如何让视图刷新.
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.
我有一个功能,它与服务器进行一些通信,以报告当前的屏幕几何形状等.
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)
有没有更简洁的方法来捕捉这种模式,或者这是要走的路?
我正在编写一个Chrome扩展程序,需要分析特定选项卡的最近浏览历史记录.该chrome.history API允许我搜索在全球历史上的项目,但似乎没有提供手段,结果定位到特定的标签.我错过了什么,或者这是不可能得到的?