I can't integrate Adf Faces and Backbone.js
Untitled1.jsf page code:
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:h="http://java.sun.com/jsf/html">
<af:document title="untitled1.jsf" id="d1" binding="#{backingBeanScope.backing_untitled1.d1}">
<af:form id="f1" binding="#{backingBeanScope.backing_untitled1.f1}">
<af:panelGridLayout id="pgl1" binding="#{backingBeanScope.backing_untitled1.pgl1}">
<af:gridRow height="50px" id="gr2" binding="#{backingBeanScope.backing_untitled1.gr2}">
<af:gridCell width="100px" halign="stretch" valign="stretch" rowSpan="2" id="gc1"
binding="#{backingBeanScope.backing_untitled1.gc1}">
<!-- Left -->
</af:gridCell>
<af:gridCell width="100%" halign="stretch" valign="stretch" id="gc2"
binding="#{backingBeanScope.backing_untitled1.gc2}">
<!-- Partial Header -->
</af:gridCell>
</af:gridRow>
<af:gridRow height="100%" id="gr1" binding="#{backingBeanScope.backing_untitled1.gr1}">
<af:gridCell width="100%" halign="stretch" valign="stretch" id="gc3"
binding="#{backingBeanScope.backing_untitled1.gc3}">
<!-- Content -->
<af:inputText label="Chck JQ" id="it1">
<af:clientListener type="keyDown" method="showInput"/>
</af:inputText>
<input id="note" type="text"/>
<table class="table" style="width: 220px;"></table>
</af:gridCell>
</af:gridRow>
</af:panelGridLayout>
</af:form>
</af:document>
<!--oracle-jdev-comment:auto-binding-backing-bean-name:backing_untitled1-->
<script src="resources/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="resources/js/underscore.js" type="text/javascript"></script>
<script src="resources/js/backbone.js" type="text/javascript"></script>
<script src="resources/js/mustache.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/js/selimm.js" xmlns="http://www.w3.org/1999/xhtml"></script>
</f:view>
my backbone.js selim.js
var NoteModel = Backbone.Model.extend({ urlRoot:"/app/rest", defaults: { note: "Boş" } }); var NoteView = Backbone.View.extend({ tagName: "tr", template: " {{note}} ", model: {}, events: { "dblclick span": "duzenlemeModu", "blur input": "duzenle" , "click button":"sil" }, duzenlemeModu: function () { this.$el.find("input").css("display", ""); this.$el.find("span").css("display", "none"); }, duzenle: function () { this.model.save("note",this.$el.find("input").val()); // HTTP PUT this.render(); this.$el.find("input").css("display", "none"); this.$el.find("span").css("display", ""); }, sil:function(){ this.model.destroy(); // HTTP DELETE this.remove(); } , render: function () { var html = Mustache.to_html(this.template, this.model.toJSON()); $(this.el).html(html); // this.$el.html(html); return this; } }); var AppView = Backbone.View.extend({ el: $("body"), events: { "keypress #note": "kaydet" }, kaydet: function (evt) { if (evt.keyCode !== 13) return; var noteModel = new NoteModel(); noteModel.set("note", $("#note").val()); noteModel.save(); // HTTP POST var noteView = new NoteView(); noteView.model = noteModel; $(".table").append(noteView.render().el); $("#note").val(""); } }); var appView = new AppView();
how to auto append <af:inputText > component in the jsf page with backbone.js