我有一个按钮,可以将项目移动到observableArray中的一个位置.我是按照以下方式做的.但是,缺点是categories()[index]从数组中删除,从而丢弃了该节点上的任何DOM操作(通过我的情况下通过jQuery验证).
有没有办法在不使用临时变量的情况下交换两个项目以保留DOM节点?
moveUp: function (category) {
var categories = viewModel.categories;
var length = categories().length;
var index = categories.indexOf(category);
var insertIndex = (index + length - 1) % length;
categories.splice(index, 1);
categories.splice(insertIndex, 0, category);
$categories.trigger("create");
}
Run Code Online (Sandbox Code Playgroud) 我用Knockout做了什么,我正在尝试使用Angular.
在我当前的项目中,我有一个表,通过scroll事件添加数据.当用户向下滚动时,我在表的末尾添加20行,总行数可以达到2k-10k.我开始显示20条记录,当用户向下滚动时,我会继续添加20行,直到达到总行数.
正如在我的Angular小提琴示例中,当使用重复时,如果将新数据推送到数组''Angular'执行所有记录并再次渲染它们但是敲除只是执行并呈现新添加的记录.在我的项目中因为我显示数千这种方式的角度有效,或者我认为它的工作方式会影响我的表现.
我只用了几个星期才使用角度我不知道如果我做错了什么或者我需要修改一些东西.
<h2>Your seat reservations</h2>
<table>
<thead><tr>
<th>Passenger name</th><th>Meal</th><th>Test</th>
</tr></thead>
<tbody data-bind="foreach: seats()">
<tr>
<td data-bind="text: mealName"></td>
<td data-bind="text: price"></td>
<td data-bind="text: $root.cellAdded()"></td>
</tr>
</tbody>
</table>
<button data-bind="click: $root.PushData()">I am Here</button>
Run Code Online (Sandbox Code Playgroud)
JS:
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
var self = this;
self.cellAdded = function(){
console.log('Test Added');
return 'ok';
};
self.PushData = function(){
console.log('PushData Called');
self.seats.push({ mealName: "Standard (sandwich)", price: 0 });
};
// Editable data
self.seats = ko.observableArray([ …Run Code Online (Sandbox Code Playgroud) 尝试对浏览器窗口执行某些操作:
$(window).width(), $(window).height()使用Knockout 使窗口大小()可观察?任何建议表示赞赏!
假设我有两个视图模型,每个模型都有一个可观察的属性,表示不同但相似的数据.
function site1Model(username) {
this.username = ko.observable(username);
....
}
function site2Model(username) = {
this.username = ko.observable(username);
....
}
Run Code Online (Sandbox Code Playgroud)
这些视图模型是独立的,不一定相互链接,但在某些情况下,第三个视图模型在它们之间创建链接.
function site3Model(username) = {
this.site1 = new site1Model(username);
this.site2 = new site2Model(username);
// we now need to ensure that the usernames are kept the same between site1/2
...
}
Run Code Online (Sandbox Code Playgroud)
以下是我提出的一些选项.
使用读取一个并写入两者的计算observable:
site3Model.username = ko.computed({
read: function() {
return this.site1.username(); // assume they are always the same
},
write: function(value) {
this.site1.username(value);
this.site2.username(value);
},
owner: site3Model
}
Run Code Online (Sandbox Code Playgroud)
只要变化总是通过计算得出,这将使值保持同步.但是如果直接改变基础可观察量,它就不会这样做.
使用该subscribe方法从另一个更新每个:
site3Model.site1.username.subscribe(function(value) …Run Code Online (Sandbox Code Playgroud)我们正在开发两个版本,一个是次要版本,另一个是主要版本,每个版本都有自己的git分支.在创建主分支之前,最初将一个功能添加到次要分支.后来该功能已从次要分支中移除(带有revert提交),因为我们决定在主要版本中引入该功能.
所以现在我们有这样一种情况:如果我们将来自次要分支的更改合并到主分支中,它将包括恢复提交,这在主要分支中没有意义.
我考虑过的一个选项是cherry-pick在恢复提交后使用次要分支中的提交,但这样做的缺点是任何基于次分支的分支都不能与主分支合并.(我们必须继续使用cherry-pick类似的东西.)但它具有更准确的历史记录的优势,因为不会包含恢复提交.
另一种选择是将所有次要分支合并到主分支中,只是"忽略"恢复变更.通过"忽略",我的意思是在进行合并时手动恢复还原的更改.从git的角度来看,这可以更好地保留历史,但可能意味着在合并期间会有一些纠缠.
一般来说,我们只在主分支中使用合并,而只是在合并之前调整修复最新代码.所以我的偏好是选择第二种选择,但我想在这里找出这是否是处理这种情况的正确方法,或者是否有我遗漏的东西.
编辑:这是ASCII艺术:-)
* (major)
| * (minor)
* | ...
| * revert feature on minor
* | major: unrelated commit
| * minor: unrelated commit
* |
|/
* common ancestor
|
* add feature to main branch
Run Code Online (Sandbox Code Playgroud) 有没有人知道为什么这个页面上的性能在 - ALL - 选项的下拉列表中是慢的?我必须为knockout.js做错事才能实现.对于较小的游戏列表,它可以快速打开.
使用Javascript
(function (app, $, undefined) {
app.viewModel = app.viewModel || {};
function Schedule() {
var self = this;
self.loaded = ko.observable(false);
self.divisionId = ko.observable();
self.games = ko.observableArray(null);
self.search = function(url) {
app.call({
type: 'POST',
data: { divisionId: self.divisionId() },
url: url,
success: function (result) {
self.games([]);
self.games.push.apply(self.games, result);
self.loaded(true);
}
});
};
self.init = function (options) {
app.applyBindings();
};
};
app.viewModel.schedule = new Schedule();
} (window.app = window.app || {}, jQuery));
Run Code Online (Sandbox Code Playgroud)
模板
<div class="games …Run Code Online (Sandbox Code Playgroud) knockout.js ×4
angularjs ×1
css ×1
data-binding ×1
git ×1
git-merge ×1
javascript ×1
jquery ×1
jquery-ui ×1
performance ×1