gpt4 book ai didi

javascript - 如何从其他组件调用Ember组件?

转载 作者:行者123 更新时间:2023-11-27 22:32:20 25 4
gpt4 key购买 nike

我有这些组件,我希望它们可以从其他组件调用。

templates/components/post-edit.hbs

<div class="container">
<div class="row">
<div class="col-xs-12">
<form id="{{if isEditing 'form-edit' 'form-add'}}" method="post" enctype="multipart/form-data">
<div class="form-result-placeholder"></div><!--.form-result-placeholder-->
<div class="form-group">
<label for="name">Name</label>
{{input id="name" class="form-control" name="name" placeholder="Name" value=name required="required"}}
</div>
<div class="form-group">
<label for="file">File</label>
{{input type="hidden" name="MAX_FILE_SIZE" value="1048576"}}
{{input id="file" class="form-control" type="file" name="file" aria-describedby="file_help"}}
<small id="file_help">JPG only, less than 1 MB.</small>
</div>
<button type="submit" {{action 'addNew'}} class="btn btn-primary">Submit</button>
<a href="./" class="btn btn-secondary">Go back</a>
</form>
</div>
</div>
</div>

组件/post-edit.js

import Ember from 'ember';
import config from 'php-api-ember-test/config/environment';

export default Ember.Component.extend({
actions: {
addNew() {
console.log('hit on submit button from add page');
this.get('addNew');
},
editSave() {
console.log('hit on submit button from edit page');
this.get('editSave');
}
},
addNew: Ember.computed(function() {
console.log('adding new data');
var formData = new FormData($('#form-add')[0]);
this.get('ajax').request(config.APP.phpApiUrl+'/add', {
method: 'POST',
})
.catch(function(error) {
console.log(error);
var response = error.errors[0].detail;
console.log(response);
// I want to call other component and render from here and put it in form-result-placeholder class.
//console.log(Ember.Component.FormAlert);// undefined
//$('.form-result-placeholder').html('{{form-alert}}');// not working
});
}),
editSave: Ember.computed(function() {
console.log('saving edit data');
}),
ajax: Ember.inject.service(),
isEditing: false,
});

templates/components/form-alert.hbs

FORM ALERT!!! (this alert message will be change by ajax response. it is not static.)

组件/form-alert.js

import Ember from 'ember';

const FormAlert = Ember.Component.extend({
});

export default FormAlert;

我想在 ajax 请求后从 post-edit.js 文件中调用 form-alert 组件。
我想调用其他组件并在ajax请求后渲染并将其放入 form-result-placeholder 类中。
如何从其他组件调用Ember组件并渲染到目标元素?

我的Ember版本:2.8.0

最佳答案

看看this问题。您需要使用 block 形式,并在子组件上设置操作。

关于javascript - 如何从其他组件调用Ember组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39448024/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com