I have the following code inside index.eco
<% for drawing, index in #drawings: %>
<li class="span4 well">
<div style="margin-bottom: 10px;">
<h3 style="margin-top: 0;"><%=drawing.name%></h3>
</div>
<div>
<a href="#/drawings/<%=drawing.id%>">
<img src="<%=drawing.cache%>" style="background-color: white; border: 1px solid #ddd">
</a>
</div>
<div style="margin-top: 10px; text-align: right;">
<button class="btn btn-danger delete" data-id="<%=drawing.id%>" style="display:inline;">Delete</button>
</div>
</li>
<% if (index + 2) % 3 is 0: %>
This code is working fine, although I now want to have it executed, each time an event is triggered. I found how I can listen for events using this:
<% Spine.Model.bind('Model:fileLoad',(map) => console.log("triggered")) %>
Although I cannot find how I can apply the same method, in order to execute the first snippet when the event is fired. I tried adding a function signature on top of snippet and then inline it, as well as some other approaches but none is working. The complete index file can be found here, although I guess that is not relevant. Any comments are welcome.
What this code does is populate the interface based on existing drawings. Although drawings only become available few seconds after the page has finished loading, so I want to execute this code once I make sure that the Models are available.
Update
I have added a function definition, although I am not sure if its correct. 'trig' is printed on event, although the view does not change.
<% #fetchModels= -> : %>
<% console.log("trig") %>
<% for drawing, index in #drawings: %>
. . .
<% end %>
<% Spine.Model.bind('Model:fileLoad',#fetchModels) %>
THe changes had to be done in the Controller rendering the index.eco file. From there I had to bind to an event, and when that event is fired call #render function.
Related
<header>
<% include templates/header.ejs %>
</header>
<% include templates/announcement.ejs %>
<form>
<br><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search a fort...">
</form><br>
<section id="placeList">
<div class="placeListBackground" id="placeListGet">
<ul id="placeCells">
<% placeData.forEach(function(placeData) { %>
<div class="placeContainer <%= placeData.category %>" class><img src= "<%= placeData.placeicon %>" alt="<%= placeData.placename %>" align="left" width="178" height="100"><span><%= placeData.placename %></span><p><%= placeData.clan %></p><p>Playing: <%= placeData.playing %></p><p class="sCategory"><%= placeData.category %></p></div>
<% }); %>
</ul>
</div>
</section>
I get an error saying "SyntaxError: missing ) after argument list in index.ejs while compiling ejs". Thing is, on my other computer this is exactly the same written code and works perfectly fine. Is it an issue with ejs or is there something I'm missing that may be significant?
You should try to following suggestion. It works for me so it should work for you.
<%- include('./templates/header.ejs');%>
<%- include('./templates/announcement.ejs');%>
I am trying to add two forms in my ejs page using ajax-form tags and sails.js 1.0.0. Can you have multiple tags inside one ejs page? In the first form the action is updateMaplayers which looks at the controller update-maplayers.js file to update any records and the maplayers action on the second ajax-form looks at the maplayers.js controller to add a new record. When I try to run either actions they both fail if I have both . If I remove one of the ajax-form actions I I can submit. Does anyone have any examples?
My ejs file looks like
<div id="maplayers-main" v-cloak>
<div class="container" >
<div class="row">
<div class="col-sm-6">
<h1>Map Layers</h1>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-outline-primary float-right" #click="openAddMapLayerForm()">Add</button>
</div>
</div>
<hr/>
<div id="maplayers-container" >
<% _.each(maplayers, function (maplayer) { %>
<ajax-form action="updateMaplayers" :syncing.sync="syncing" :cloud-error.sync="cloudError" #submitted="submittedForm()" :handle-parsing="handleParsingForm">
......
</ajax-form>
<% }) %>
</div>
<div id="maplayers-add-container">
<ajax-form action="maplayers" :syncing.sync="syncing" :cloud-error.sync="cloudError" #submitted="submittedForm()" :handle-parsing="handleParsingForm">
........
</ajax-form>
</div>
</div>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
I bind list of data to HTML, in each list has button for get details by ajax. I want to bind callback data to member of model, After ajax call back, object have data, view received ( ko.toJSON(d, null, 2))object. But HTML doesn't update data.
I don't know what is wrong. please help. Thank you.
Html:
<section id="lists">
<article class="todoList">
<script type="text/html" id="person-template">
<!-- <p>Credits: <span data-bind="text: message"></span></p>-->
<p>xxx</p>
</script>
<ul data-bind="foreach: Items">
<li>
<div>
<span class="contentarea" data-bind="text: message"></span>
<button data-bind="click: $parent.evClick.bind($data)">Get details</button>
<button data-bind="click: detail">Ajax-Get</button>
<p>Credits: <span data-bind="text: d.message"></span></p>
<div style="display: block; width: 200px; height: 200px; border: solid 1px #ff6a00;" data-bind="text: ko.toJSON(d, null, 2)"></div>
</div>
</li>
</ul>
</article>
</section>
Full code here.
http://jsfiddle.net/wuttipat/sc8fX/12/
You should use
<div data-bind="with: d">
<span data-bind="text: message"></span>
Because data-bind="with: d" create scope for binding context when you use data-bind="text: message" inside it will reference to parent binding context in this case mean d.
Full code here : http://jsfiddle.net/sc8fX/74/
I think I've figured it out (after cleaning up the fiddle some more). You're binding is
text: d.message
But it should be
text: message
Because d is the context of your binding. So you're actually trying to bind to d.d.message which doesn't exist. Replacing it with text: message seemed to work, no?
See this updated fiddle.
I found the issue posted on knockout document.
http://knockoutjs.com/documentation/with-binding.html
I try to make rhomobile search in Fixed DB.
But it returns ALL entries in DB instead of the ones with given QID
<%=#questions.id%>
<% #antworts = Antwort.find(:conditions=>{'qid'=>#questions.id})%>
<% #antworts.each do |antwort| %>
<li>
<a href="sdfsdf">
<%= antwort.antwort %>
</a>
</li>
<% end %>
</ul>
Any idea why?
You need to pass :first or :all in the first argument:
Antwort.find(:all, :conditions=>{'qid'=>#questions.id})
Or change the method to find_all:
Antwort.find_all(:conditions=>{'qid'=>#questions.id})
I'm doing a site (asp.net mvc2) that should work in IE6 as well.
On a page I inject a control as partial view.
<div id="LocationContainer">
<% Html.RenderPartial("../Shared/EditTemplates/ContactInfoTemplate",
new ContextAwareViewModel<ContactInfoViewModel>()
{
ProcessStep = ProcessStep.Configure,
Model = Model.ContactPerson
}); %>
</div>
It contains following snippet of code:
<div style="margin-bottom: 10px;">
<%= Html.CheckBox(Model.Model.ContactType + ".IsDTBranch",
Model.Model.PersonViewModel.IsTDBranch,
new { #class = "tdBranchChkBox"}) %>
<%= Html.Resource("Resources, ThisIsTDBranchLabel") %>
</div>
That gives in the end this html:
<div style="margin-bottom: 10px;">
<input class="tdBranchChkBox" id="EventContact_IsDTBranch"
name="EventContact.IsDTBranch" type="checkbox" value="true" />
Il s'agit d'une succursale de la TD
</div>
After all of this IE6 doesn't render text. But text is there and appears when I start to select area where it should be.
Does anybody know how it can be cured?
Thanks.
Long story short:
In this case, a height correction seems to have done the trick. The Holly Hack involved adding the following code to the CSS file:
/* Hides from IE5-mac */
div#content
{
height: 1%;
}
/* End hide from IE5-mac / /— Holly Hack for IE 6 Peekaboo bug —*/
The explanation for this code can be found on the John and Holly website.
Taken from here http://www.bpwrap.com/2005/08/the-internet-explorer-6-peekaboo-bug/
Thanks a lot author.