Question

我正在为我正在处理的应用构建自定义小部件系统。我想要发生的是一个小部件通过更改数据属性值来更新另一个小部件的能力。在页面加载时，初始数据通过PHP加载到此data-attr中，并使用jQuery在事后切换数据。

例如，一个小部件的工作方式如下：

PHP将json数据加载到DOM元素
jQuery函数传递元素ID并从data-attr检索数据并使用它来生成图表，例如
基于用户交互，另一个小部件将数据发送到元素data-attr，同时还触发自定义jQuery事件
初始功能获取新数据并更新其图形

我开始了一个演示：

＆＃13;

// Ranomize Number & Replace Variable
$(function() {
  $('#random').click(function(e) {
    e.preventDefault();
    num = Math.random() + 100;
    $('#data').attr('data-receiver', num);
  });
});

// Receive Data & Output
$(function() {
  var output = $('#output');
  var received = $('#data').attr('data-receiver');
  output.html(received);

  // Not sure what to do next
});

＆＃13;

#content {
  background: #efefef;
  margin: 40px auto;
  display: block;
  padding: 50px;
  width: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="data" data-receiver="10"></div>
  <strong>Output:</strong>
  <span id="output"></span>
  <br/>
  <br/>
  <a href="#" id="random">Randomize</a>
</div>

＆＃13;

但说实话，我不确定如何开始。我有一些代码将一个随机值放入接收DOM元素，但不知道如何设置事件或编写另一个函数来接收和更新#output div。

我很乐意回答问题或编写更多代码以帮助更好地解释我的目标。提前谢谢。

Answer 1

尝试使用.queue()，.promise()创建＆＃34;订阅者＆＃34; ，＆＃34;出版商＆＃34;图案

var output = $("#output");

var process = function process(next) {
    // `this`:`#data`
    var num = Math.random() * 100;
    $(this).data("receiver", num);
    return next()
};

var update = function update() {
  // `this`:`#data`
  $(this).promise("process").then(function(received) {
    // `received`:`#data`,
    // do stuff with `received`
    console.log(received.data("receiver"));
    output.html(received.data("receiver"));
    received.queue("process", process);
    // add `process` to `received` `"process"` queue
    console.log(received, received.queue("process"));
  });
};

// queue first call to `process`
$("#data").queue("process", process);

$("#random").click(function (e) {
    e.preventDefault();        
    update.call($("#data").dequeue("process"));       
});

jsfiddle http://jsfiddle.net/jev4wuej/2/

Answer 2

我更喜欢使用自定义事件，这些事件允许代码更加分离并且彼此独立。

jsfiddle

JS

var toolbar = {
    init: function() {
        $('.data-randomizer').click(this.handleRandomizer);
    },
    handleRandomizer: function() {
        var number = Math.random() + 100;
        $.event.trigger('update-request.storage-widget', [number]);
    }
};
var output = {
    init: function() {
        $(document).on('updated.storage-widget', this.handleDisplay);
        $.event.trigger('data-request.storage-widget', this.handleDisplay);
    },
    handleDisplay: function(event, number) {
        $('.data-output-widget #output').text(number);
    },
    requestOut: function() {

    }
};
var storage = {
    init: function() {
        $(document).on('update-request.storage-widget', this.handleUpdateRequest);
        $(document).on('data-request.storage-widget', this.handleDataRequest);
    },
    handleUpdateRequest: function(event, number) {
        $('.data-storage-widget').attr('data-receiver', number);
        $.event.trigger('updated.storage-widget', [number]);
    },
    handleDataRequest: function(event, callback) {
        var number = $('.data-storage-widget').data('receiver');
        callback(event, number);
    }
};

toolbar.init();
storage.init();
output.init();

HTML

<div id="content">
    <div class="data-storage-widget" data-receiver="10"></div>
    <div class="data-output-widget">
        <strong>Output:</strong>
        <span id="output"></span>
    </div>
    <div class="tool-bar-widget">
         <a href="javascript:void(0)" class="data-randomizer">Randomize</a>
    </div>

</div>

jQuery数据属性的自定义事件

2 个答案:

JS

HTML