Question

我正在页面上使用调色板组件，我希望其中两个中的可用元素根据第一个中选择的内容进行更改。

实现这一目标的最佳方法是什么？调色板组件抛出哪些事件，我可以听，修改调色板的模型并执行区域更新？我认为the same way as for select components可以这样做：

void onValueChanged() {
    // do something
}

不幸的是，这对于调色板不起作用。

我正在使用Tapestry 5.4-beta-6，但我想从早期版本开始，情况并没有太大变化。

Answer 1

我可能会用mixin来做这件事。

public class PaletteChange {
   @Parameter
   private String zone;

   @InjectContainer
   private Palette palette;

   public void afterRender() {
      Link eventLink = componentResources.createEventLink("change");
      JSONObject args = new JSONOBject(
          "id", pallete.getClientId(), 
          "url", eventLink, 
          "zone", zone
      );
      javascriptSupport.addScript("palleteChange(%s)", args);
   }

   Object onChange(@RequestParameter("value") String value) {
      CaptureResultCallback<Object> callback = new CaptureResultCallback<Object>();
      resources.triggerEvent("change", new String[] { value }, callback);
      return callback.getResult();
   }
}

的Javascript

function palleteChange(spec) {
   var field = $('#' + spec.id + '/select[1]');
   field.on('change', function() {
      var zoneManager = Tapestry.findZoneManagerForZone(spec.zone);
      var params = { value: field.val() };
      zoneManager.updateFromURL(spec.url, params);
   });
}

然后在代码中使用mixin

<t:palette t:id="myPalette" t:mixins="paletteChange" zone="myZone" ... />
<t:zone t:id="myZone">
    ...
</t:zone>

页

@Inject
private Zone myZone;

Block onChangeFromMyPalette(String value) {
   doStuff(value);
   return myZone.getBody();
}

有关类似的mixin，请参阅here。

Answer 2

我最终将didChange元素与类似的mixin一起使用，如Observe mixin。对于感兴趣的人，我在Github上放了一个演示。

只是几点说明：

我使用了5.4 beta 6，它已经有了必要的客户端事件。
我无法使用Tapestry javascript模块使其工作，所以我仍然使用javascriptSupport.addInitializerCall。
剩下的问题是，使用区域更新更新第二个调色板将重置用户在此调色板中所做的任何更改，因为它们仅保留在客户端（在隐藏字段中）。我仍然需要研究这个问题，但这不是原始问题的一部分。

Tapestry：来自Palette组件的事件

2 个答案: