我们正在为我们的Web应用程序实现完全类似于gmail的标签功能-您可以选择帖子(复选框)，然后从“标签”(它们本身是一组复选框)下拉列表中选择要应用/删除的标签)。问题是“如何去做？”我有一个解决方案，在解决该问题之前，我想先了解一下这是否正确，以及是否可以使用某些我可能不知道的jquery / javascript构造将其简化。无论如何，我都不是JavaScript / jQuery专业人士。 :)

让:
M = {帖子集}
N = {标签集}
M_N = M和N之间的多对多关系，即一组帖子中至少包含N个标签

输出:给定一组“选定的”帖子和一组“选定的”标签，将获得具有以下值的JSON项目数组:

最佳答案

算法

我认为，该算法很有意义。

虽然，是否需要大量if-eles来计算输出 Action ？为什么不只是在所有帖子中添加打勾的标签-当然，您无论如何也不能两次在同一帖子中添加一个标签。我怀疑这是否会损害性能……特别是如果您将所有更改后的帖子的JSON数据始终放入一个请求中(这取决于您的后端是否支持一次放置多个对象)。

用MVC克服复杂性

关于如何简化它:我认为，代码组织在这里很重要。

您可以使用其中的一些功能:建议您检查使用JavaScript实现某种MVC方法的库(例如Backbone.js)。您最终将拥有一些类，并且您的逻辑将适合这些类中的小方法。您的数据存储逻辑将由“模型”类处理，而显示逻辑将由“ View ”处理。这更易于维护和测试。

(如果您还没有查看这两个很棒的主题演讲，请查看Building large jQuery applications，Functionality focused code organization。)

问题在于现有代码的重构可能要花费一些时间，而且很难从一开始就将其正确处理。另外，它还影响您的整个客户端体系结构，因此可能不是您想要的。

例

如果我有类似的任务，我将使用Backbone.js并执行类似的操作(pseudocode / CoffeeScript； 这个示例既不好也不完整，目的是一般地给出基于类的方法的基本思想) :

apply_handler: ->
    # When user clicks Apply button
    selectedPosts = PostManager.get_selected()
    changedLabels = LabelManager.get_changed()
    for label in changedLabels
        for post in selectedPosts
            # Send your data to the server:
            # | post.id | label.id | label.get_action() |
            # Or use functionality provided by Backbone for that. It can handle
            # AJAX requests, if your server-side is RESTful.


class PostModel
    # Post data: title, body, etc.

    labels: <list of labels that this post already contains>
    checked: <true | false>
    view: <PostView instance>

class PostView
    model: <PostModel instance>
    el: <corresponding li element>

    handle_checkbox_click: ->
        # Get new status from checkbox value.
        this.model.checked = $(el).find('.checkbox').val()
        # Update labels representation.
        LabelManager.update_all_initial_states()

class PostManager
    # All post instances:
    posts: <list>

    # Filter posts, returning list containing only checked ones:
    get_selected: -> this.posts.filter (post) -> post.get('checked') == true


class LabelModel
    # Label data: name, color, etc.

    initialState: <ticked | partialTick | none>
    newState: <ticked | partialTick | none>
    view: <LabelView instance>

    # Compute output action:
    get_action: ->
        new = this.newState
        if new == none then 'DELETE'
        if new == partialTick then 'NO_CHANGE'
        if new == ticked then 'ADD'

class LabelView
    model: <LabelModel instance>
    el: <corresponding li element>

    # Get new status from checkbox value.
    handle_checkbox_click: ->
        # (Your custom implementation depends on what solution are you using for 
        # 3-state checkboxes.)
        this.model.newState = $(this.el).find('.checkbox').val()

    # This method updates checked status depending on how many selected posts
    # are tagged with this label.
    update_initial_state: ->
        label = this.model
        checkbox = $(this.el).find('.checkbox')
        selectedPosts = PostManager.get_selected()
        postCount = selectedPosts.length

        # How many selected posts are tagged with this label:
        labelCount = 0
        for post in selectedPosts
            if label in post.labels
                labelCount += 1

        # Update checkbox value
        if labelCount == 0
            # No posts are tagged with this label
            checkbox.val('none')
        if labelCount == postCount
            # All posts are tagged with this label
            checkbox.val('ticked')
        else
            # Some posts are tagged with this label
            checkbox.val('partialTick')

        # Update object status from checkbox value
        this.initialState = checkbox.val()

class LabelManager
    # All labels:
    labels: <list>

    # Get labels with changed state:
    get_changed: ->
        this.labels.filter (label) ->
            label.get('initialState') != label.get('newState')

    # Self-explanatory, I guess:
    update_all_initial_states: ->
        for label in this.labels
            label.view.update_initial_state()

关于javascript - gmail标签选择器难题-有更好的方法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6643089/