Question

我正在尝试使用Polymer templatizer来创建模板的单个实例，将其附加到div中并获取数据绑定以在主机和此实例之间工作，但是很难让它工作。

我尝试过的最简单的例子：

HTML

<dom-module id="test-app">
  <paper-input label="host" value="{{test}}"></paper-input>
  <template id="template">
    <paper-input label="instance" value="{{test}}"></paper-input>
  </template>
  <div id="placehere"></div>
</dom-module>

JS

Polymer({
  is: "test-app",
  behaviors: [Polymer.Templatizer],
  properties: {
    test: {
      type: String,
      value: 'hello',
      notify: true,
    },
  },

  ready: function() { 
    this.templatize(this.$.template);
    var clone = this.stamp({test: this.test}); 
    Polymer.dom(this.$.placehere).appendChild(clone.root);
  },
});

上面的想法是创建模板的实例，将其置于＆＃34; placehere＆＃34;并让两个输入文本框保持同步。

当页面加载时，实例创建成功，两个文本框中的值为＆＃34; hello＆＃34;但是改变任何一个输入框什么也不做。

聚合物页面上的文档似乎有点轻量级： https://www.polymer-project.org/1.0/docs/api/Polymer.Templatizer 但它提到了_forwardParentProp和_forwardParentPath的使用。我应该如何在我的情况下实施它们？

Answer 1

正如您已经想到的那样，您需要实现一些Templatizer的方法。特别是dom-module和template方法。

但在开始之前，我还必须在自定义元素定义中指出一个额外的错误。在<dom-module id="test-app"> <template> <paper-input label="host" value="{{test}}"></paper-input> <template id="template"> <paper-input label="instance" value="{{test}}"></paper-input> </template> <div id="placehere"></div> </template> </dom-module>元素中，您可以在没有模板的情况下定义元素的内容。必须将所有内容包装在Polymer({ is: "test-app", behaviors: [Polymer.Templatizer], properties: { test: { type: String, value: 'hello', notify: true, }, }, ready: function() { this.templatize(this.$.template); var clone = this.stamp({test: this.test}); this.stamped = clone.root.querySelector('*'); // This line is new Polymer.dom(this.$.placehere).appendChild(clone.root); }, // This method is new _forwardParentProp: function(prop, value) { if (this.stamped) { this.stamped._templateInstance[prop] = value; } }, // This method is new _forwardParentPath: function(path, value) { if (this.stamped) { this.stamped._templateInstance.notifyPath(path, value, true); } }, });元素中。自定义元素的固定版本如下：

 private void doCrop() {
        final ArrayList<CropOption> cropOptions = new ArrayList<CropOption>();

        Intent intent = new Intent("com.android.camera.action.CROP");
        intent.setType("image/*");

        List<ResolveInfo> list = getPackageManager().queryIntentActivities(
                intent, 0);

        int size = list.size();

        if (size == 0) {
            Toast.makeText(this, "Can not find image crop app",
                    Toast.LENGTH_SHORT).show();

            return;
        } else {
            intent.setData(mImageCaptureUri);

            intent.putExtra("outputX", 200);
            intent.putExtra("outputY", 200);
            intent.putExtra("aspectX", 1);
            intent.putExtra("aspectY", 1);
            intent.putExtra("scale", true);
            intent.putExtra("return-data", true);

            if (size == 1) {
                Intent i = new Intent(intent);
                ResolveInfo res = list.get(0);

                i.setComponent(new ComponentName(res.activityInfo.packageName,
                        res.activityInfo.name));

                startActivityForResult(i, CROP_FROM_CAMERA);
            } else {
                for (ResolveInfo res : list) {
                    final CropOption co = new CropOption();

                    co.title = getPackageManager().getApplicationLabel(
                            res.activityInfo.applicationInfo);
                    co.icon = getPackageManager().getApplicationIcon(
                            res.activityInfo.applicationInfo);
                    co.appIntent = new Intent(intent);

                    co.appIntent
                            .setComponent(new ComponentName(
                                    res.activityInfo.packageName,
                                    res.activityInfo.name));

                    cropOptions.add(co);
                }

                CropOptionAdapter adapter = new CropOptionAdapter(
                        getApplicationContext(), cropOptions);

                AlertDialog.Builder builder = new AlertDialog.Builder(this);
                builder.setTitle("Choose Crop App");
                builder.setAdapter(adapter,
                        new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog, int item) {
                                startActivityForResult(
                                        cropOptions.get(item).appIntent,
                                        CROP_FROM_CAMERA);
                            }
                        });

                builder.setOnCancelListener(new DialogInterface.OnCancelListener() {
                    @Override
                    public void onCancel(DialogInterface dialog) {

                        if (mImageCaptureUri != null) {
                            getContentResolver().delete(mImageCaptureUri, null,
                                    null);
                            mImageCaptureUri = null;
                        }
                    }
                });

                AlertDialog alert = builder.create();

                alert.show();
            }
        }
    }

对于Templatizer方法的实现，首先需要存储标记的实例。之后，需要实现的两种方法都或多或少都是简单的单行。

以下是自定义元素的完整JavaScript部分：

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import android.content.Context;

import java.util.ArrayList;


public class CropOptionAdapter extends ArrayAdapter<CropOption> {
    private ArrayList<CropOption> mOptions;
    private LayoutInflater mInflater;

    public CropOptionAdapter(Context context, ArrayList<CropOption> options) {
        super(context, R.layout.crop_selector, options);

        mOptions    = options;

        mInflater   = LayoutInflater.from(context);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup group) {
        if (convertView == null)
            convertView = mInflater.inflate(R.layout.crop_selector, null);

        CropOption item = mOptions.get(position);

        if (item != null) {
            ((ImageView) convertView.findViewById(R.id.iv_icon)).setImageDrawable(item.icon);
            ((TextView) convertView.findViewById(R.id.tv_name)).setText(item.title);

            return convertView;
        }

        return null;
    }
}

这是一个有效的JSBin演示：http://jsbin.com/saketemehi/1/edit?html,js,output

Polymer Templatizer实例与主机之间的数据绑定

1 个答案: