Tapestry：来自 Palette 组件的事件

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();
}

查看here 了解类似的mixin。

Answer 2

我终于将didChange 元素与Observe mixin 等类似的mixin 一起使用。我在Github 上为任何感兴趣的人提供了一个演示。

只是一些注意事项：

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