Question

我们正在重构Knockout SPA。其中一项改进是尽可能使组件更通用。例如，我们需要一个“多态”/通用<elements-widget>来呈现元素列表。根据列表的类型，子组件的类型可能会有所不同。

当前应用的示例：

我们有一个“人物页面”：

<persons-page>
  <persons-widget> <persons-widget>
</persons-page>

“人物小部件”：

<div class="grid" data-bind="foreach: elements">
    <person-widget params="element:$rawData"></persons-widget>
</div>

我们希望在“人物页面”

上使用通用组件

<elements-widget params="elements:elements, elemComponent:'person-widget'">
</elements-widget>

并且通用组件的模板应如下所示：

<div class="grid" data-bind="foreach: elements">
    <elemComponent> params="element:$rawData"></elemComponent>
</div>

其中 elemComponent 是传递给 elements-widget 的参数。

非常感谢

Answer 1

您可以使用component binding来控制在这个地方呈现的确切组件：

for (int i = 0; i < stops.length(); i++) {
        JSONObject c = stops.getJSONObject(i);



        if(c.has("images") && !c.isNull("images")){
            JSONArray imagenes = jsonObj.optJSONArray("images");
            if(imagenes!=null) {
                for (int j = 0; j < imagenes.length(); j++) {
                    String valueString = imagenes.getString(i);
                    Log.d("myTag", "Viatge Parser  con valuestring" + valueString);
                    URL url2 = new URL(valueString);
                    HttpURLConnection connection = (HttpURLConnection) url2.openConnection();
                    connection.setDoInput(true);
                    connection.connect();
                    InputStream input = connection.getInputStream();
                    Bitmap miBitmap = BitmapFactory.decodeStream(input);
                    s.addImage(miBitmap);
                }
            }


        }

在这种情况下，组件名称“shopping-cart”可以更改为当前上下文对象的属性，例如包含要呈现的组件名称的<div data-bind='component: { name: "shopping-cart", params: { mode: "detailed-list", items: productsList } }'></div>。

Knockout组件：将子组件作为参数传递给父组件

1 个答案: