简体   繁体   English

在海边更新嵌入式组件,无需刷新整个页面

[英]Updating embeded components in seaside, without refreshing the whole page

I have a component (ItemTree) which has 3 embeded components. 我有一个组件(ItemTree),它有3个嵌入组件。 The first (ItemTreeList) is a list of items to select. 第一个(ItemTreeList)是要选择的项目列表。 The second (ItemGIDE) shows properties for the item you selected. 第二个(ItemGIDE)显示所选项目的属性。

How do I tell ItemGIDE to update when a new selection is made on ItemTreeList? 在ItemTreeList上进行新选择时,如何告诉ItemGIDE更新?

Firstly, This is more complicated than I'm making it out to be. 首先,这比我要做的更复杂。 The ItemTreeList has hirarchy with node types and node instances. ItemTreeList具有节点类型和节点实例的hirarchy。 It has collapsable divs and when clicking on either a top level hirarchy item or an instance below, will set various variables on other objects. 它具有可折叠的div,当点击顶层hirarchy项或下面的实例时,将在其他对象上设置各种变量。 So, a whole lot happens on a single click. 因此,只需单击即可完成大量操作。 I've got the ItemTreeList to update itself without refreshing the whole page. 我已经让ItemTreeList更新自己而不刷新整个页面。 Just need to 'Announce' to the other component (ItemGIDE) that it needs to refresh (Again without refreshing the whole page). 只需要“声明”它需要刷新的其他组件(ItemGIDE)(再次没有刷新整个页面)。

  • I've got Jquery and Ajax at hand. 我手边有Jquery和Ajax。
  • I'm using Visualage Smalltalk 8.5.0 with Seaside 3.0. 我正在使用Visualage Smalltalk 8.5.0和Seaside 3.0。 -I've been thinking about a call to ItemTree to tell its sub components to update? - 我一直在考虑调用ItemTree来告诉它的子组件更新?
  • I've been thinking about using 'announce' to 'announce' to other components to update? 我一直在考虑使用'announce'来“宣布”其他组件进行更新?
  • I've been doing actual programming for less than 6 months? 我一直在做不到6个月的实际编程?

The book Dynamic Web Development with Seaside contains a draft chapter about JQuery. Dynamic Web Development with Seaside ”一书包含一个关于JQuery的章节草案。 In there you find an section called Replace a Component with an example of what you ask for: 在那里,您可以找到一个名为“ 替换组件”的部分,其中包含您要求的示例:

OuterComponent>>renderContentOn: html
  html div
    id: (id := html nextId);
    with: child.
  html anchor
    onClick: ((html jQuery id: id) load
      html: [ :r | 
        child := OtherComponent new;
        r render: child ]);
    with: 'Change Component'

The code shows the render method of the outer component. 该代码显示了外部组件的render方法。 It assumes that the component has a variable called child that is initialized with the component shown in the initial render. 它假定组件有一个名为child的变量,该变量使用初始渲染中显示的组件进行初始化。 Furthermore, it assumes that the component has a variable called id that is set during rendering to remember the target DOM node where the child component is rendered. 此外,它假定组件具有一个名为id的变量,该变量在呈现期间设置为记住呈现子组件的目标DOM节点。 In the AJAX callback of the anchor you replace the child component with OtherComponent new and re-render the contents of the target node. 在锚的AJAX回调中,用OtherComponent new替换子组件并重新呈现目标节点的内容。

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

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