如何创建自定义属性以添加if.bind?

时间:2016-05-02 15:30:26

标签: javascript attributes aurelia

我想创建一个属性来显示或隐藏基于某种全局状态的元素。

示例:

<div state='new,unknown'>yadayadayada</div>

然后,此属性将div元素转换为有效:

<div if.bind="['new','unknown'] | state & signal : 'state-change'">...</div>

状态值转换器会将数组转换为布尔值。

目标是当前的全局状态是任何提供的状态,然后显示其他元素隐藏它。

我不想要一个带有compose的自定义元素。

2 个答案:

答案 0 :(得分:4)

Aurelia作弊表有一个example of naive-if custom attribute。我基于它制定了一个解决方案。唯一的区别是:

  • 计算显示或隐藏的逻辑(当然)
  • 订阅全球州,而不仅仅是public class CameraPic extends Fragment { private static final int CAPTURE_PICCODE = 989; Button button; ImageView imageView; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { final View rootView = inflater.inflate(R.layout.cameralayout, container, false); button = (Button) rootView.findViewById(R.id.button1); imageView = (ImageView) rootView.findViewById(R.id.imageview1); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(intent, CAPTURE_IMAGE_ACTIVITY_REQUEST_CODE); } }); return rootView; } @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == CAPTURE_IMAGE_ACTIVITY_REQUEST_CODE) { if (resultCode == Activity.RESULT_OK) { Bitmap bmp = (Bitmap) data.getExtras().get("data"); ByteArrayOutputStream stream = new ByteArrayOutputStream(); bmp.compress(Bitmap.CompressFormat.PNG, 100, stream); byte[] byteArray = stream.toByteArray(); Bitmap bitmap = BitmapFactory.decodeByteArray(byteArray, 0, byteArray.length); imageView.setImageBitmap(bitmap); } } } }

代码:

valueChanged

GistRun

答案 1 :(得分:0)

您可以创建一个属性并将if绑定到该属性。像这样:

import {computedFrom} from 'aurelia-framework';

export class MyViewModel {

  @computedFrom('something', 'someOtherValue')
  get globalState() {
     //do all conditions you need
     if (myArray.indexOf('something') != -1 && someOtherValue) {
       return true;
     }

     return false;
  }
}

然后你必须绑定:

<div if.bind="globalState"></div>
相关问题