简体   繁体   English

具有bootstrap-sortable的元项目

[英]Meta items with bootstrap-sortable

With knockout you can produce a row of bootstrap nav-tabs like this 使用淘汰赛,您可以像这样生成一排bootstrap nav-tabs

<ul class="nav nav-tabs question-container" data-bind="foreach: Questions">
  <li role="presentation" data-bind="css: { active: $index() === 0 }">
    <a data-toggle="tab" 
       data-bind="attr: { href: '#q' + QuestionId() }">, text: Caption"></a>
  </li>
</ul>

With bootstrap-sortable you can make the tabs sortable simply by changing the binding. 使用bootstrap-sortable,您只需更改绑定即可对选项卡进行排序。 A limitation clearly documented is that you can't use the sortable binding with virtual elements because it depends on being defined on a single container element. 明确记录的限制是您不能将可排序绑定与虚拟元素一起使用,因为它取决于在单个容器元素上定义。

Suppose I wanted to add a tab "Add a new question" presenting various options for what to create, after the manner of the add-new tabs used in Chrome, Internet Explorer, Firefox and Microsoft Excel. 假设我想在Chrome,Internet Explorer,Firefox和Microsoft Excel中使用的添加新标签的方式之后添加一个“添加新问题”标签,其中显示了要创建的内容的各种选项。

If I weren't trying to make the tabs sortable, I'd do this: 如果我不想让选项卡排序,我会这样做:

<ul class="nav nav-tabs question-container">
  <!-- ko foreach: Questions-->
  <li role="presentation" data-bind="css: { active: $index() === 0 }">
    <a data-toggle="tab" 
       data-bind="attr: { href: '#q' + QuestionId() }, text: Caption"></a>
  </li>
  <!-- /ko -->
  <li role="presentation" data-bind="css: { active: Questions().length === 0 }">
    <a data-toggle="tab" href="#addQuestion">
    <i class="fa fa-plus"></i>Add a new question</a>
  </li>
</ul>

By adding a marker class "sortable-item" to the <LI> in the template, we can trivially exclude the meta item by defining item: ".sortable-item" in the bootstrap-sortable options. 通过向模板中的<LI>添加标记类“sortable-item”,我们可以通过在bootstrap-sortable选项中定义item: ".sortable-item"来简单地排除元项。 But it still won't fly, because you can't use virtual elements with bootstrap-sortable. 但它仍然无法飞行,因为你无法使用带有bootstrap-sortable的虚拟元素。

Does anyone know how to add meta items to a collection managed by bootstrap-sortable? 有谁知道如何将元项添加到由bootstrap-sortable管理的集合中?

There are four ways this problem can be approached. 有四种方法可以解决这个问题。

  1. Don't use bootstrap-sortable, apply jQuery-UI sortable explicitly and ise sort update events to update the backing store collection. 不要使用bootstrap-sortable,显式应用jQuery-UI可排序,而是排序更新事件以更新后备存储集合。
  2. Use bootstrap and inject the meta items after binding completes. 绑定完成后使用bootstrap并注入元项。
  3. Modify bootstrap to support the notion of a meta-items template in addition to the binding template. 修改引导程序以支持除绑定模板之外的元项目模板的概念。
  4. Modify bootstrap to use the immediate parent of a virtual node. 修改引导程序以使用虚拟节点的直接父节点。 There is always a parent, even if it's BODY. 总是有一个父母,即使它是身体。

Personally I favour option four, because it doesn't change how bootstrap-sortable is applied, it simply removes a limitation. 我个人赞成选项四,因为它不会改变bootstrap-sortable的应用方式,它只是删除了一个限制。 No breaking changes. 没有重大变化。

Option three is nearly as good but it increases the conceptual complexity and makes the learning curve steeper. 选项三几乎同样好,但它增加了概念的复杂性,使学习曲线更加陡峭。

Option two sucks big rocks. 选项二吮吸大石头。 It screws up separation of concerns. 它搞砸了关注点的分离。

Option one, which is what I actually did, sucks even bigger rocks. 选项一,这是我实际做的,吮吸更大的岩石。 Not only does it pollute the view model with UI behaviour, it's complicated to do, depends on poorly documented and obscure knockout internal utilities and it's just plain ugly. 它不仅会污染具有UI行为的视图模型,而且执行起来很复杂,取决于记录不佳和模糊的淘汰内部实用程序,而且它只是简单的丑陋。 Everything about it is a justification for the existence of bootstrap-sortable. 关于它的一切都是bootstrap-sortable存在的理由。


In answer to this comment: 回答这个评论:

The "add question" button is not a question, therefore it should not be part of the list of questions “添加问题”按钮不是问题,因此它不应该是问题列表的一部分

It's not a list of questions, it's the UI for a set of operations that can be performed on a list of questions. 它不是一个问题列表,它是可以一系列问题执行的一组操作的UI。 Most of them are "display item X for editing" but one of them is "create a new item". 他们中的大多数是“显示项目X进行编辑”,但其中一个是“创建一个新项目”。 Also present are controls for deleting items and for re-ordering them. 还存在用于删除项目和重新排序项目的控件。

I find it hilariously ironic that anyone would claim this is not an obvious UI design while using a web browser - a ubiquitous example of this exact design 我觉得有点讽刺的是,任何人都会声称这不是一个明显的UI设计, 而使用网页浏览器 - 这个确切设计的普遍存在的例子

It doesn't seem like there is currently a better story than the workaround I mention in the question. 目前似乎没有比我在问题中提到的解决方法更好的故事。 The ideal solution would be for me or someone else to write a knockout binding. 理想的解决方案是我或其他人写一个淘汰赛绑定。 Most of the code in bootstrap-sortable seems to have to do with templating the rather nifty table it generates, but I think the required lessons are there. bootstrap-sortable中的大多数代码似乎与模板化它生成的相当漂亮的表有关,但我认为必需的课程就在那里。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM